/* ===============================
🔥 DOPE TONE FOOTER
=============================== */


.dt-footer{


    position:relative;


    margin-top:50px;


    max-width:100%;


    margin-left:auto;
    margin-right:auto;


    padding:
    34px 24px 16px;


    border-radius:24px;


    border-top:
    1px solid rgba(255,255,255,0.06);


    background:
    linear-gradient(
        180deg,
        rgba(10,15,30,0.92),
        rgba(2,6,23,1)
    );


    overflow:hidden;


    display:flex;
    flex-direction:column;
    align-items:center;


    text-align:center;
}




/* glow */
.dt-footer-glow{


    position:absolute;


    inset:0;


    background:
    radial-gradient(
        circle at top center,
        rgba(0,240,255,0.08),
        transparent 55%
    );


    pointer-events:none;
}




/* ===============================
🔥 TOP
=============================== */


.dt-footer-top{


    position:relative;


    z-index:2;


    width:100%;


    display:flex;
    flex-direction:column;


    align-items:center;
    justify-content:center;


    text-align:center;


    gap:26px;
}




/* ===============================
🔥 BRAND
=============================== */


.dt-footer-brand{


    max-width:480px;


    display:flex;
    flex-direction:column;
    align-items:center;
}




.dt-footer-brand h2{


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


    letter-spacing:2px;


    margin-bottom:8px;


    background:
    linear-gradient(
        90deg,
        #00f0ff,
        #7c3aed,
        #ff3b7a
    );


    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}




.dt-footer-brand p{


    color:rgba(255,255,255,0.68);


    line-height:1.6;


    font-size:13px;


    max-width:420px;
}




/* ===============================
🔥 SOCIALS
=============================== */


.footer-socials{


    display:flex;
    align-items:center;
    justify-content:center;


    gap:10px;


    margin-top:16px;
}




/* base */
.footer-social{


    width:38px;
    height:38px;


    display:flex;
    align-items:center;
    justify-content:center;


    border-radius:12px;


    background:
    rgba(255,255,255,0.04);


    border:
    1px solid rgba(255,255,255,0.06);


    color:#fff;


    text-decoration:none;


    font-size:16px;


    transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}




/* hover */
.footer-social:hover{


    transform:
    translateY(-2px)
    scale(1.04);
}




/* instagram */
.footer-social.ig:hover{


    border-color:
    rgba(255,0,128,0.26);


    box-shadow:
    0 0 14px rgba(255,0,128,0.18);
}




/* youtube */
.footer-social.yt:hover{


    border-color:
    rgba(255,0,0,0.26);


    box-shadow:
    0 0 14px rgba(255,0,0,0.18);
}




/* tiktok */
.footer-social.tk:hover{


    border-color:
    rgba(0,240,255,0.26);


    box-shadow:
    0 0 14px rgba(0,240,255,0.18);
}




/* ===============================
🔥 LINKS
=============================== */


.dt-footer-links{


    width:100%;


    display:flex;


    justify-content:center;
    align-items:flex-start;


    flex-wrap:wrap;


    gap:42px;


    text-align:center;
}




.dt-footer-col{


    display:flex;
    flex-direction:column;


    align-items:center;


    gap:8px;


    min-width:110px;
}




.dt-footer-col h4{


    color:white;


    font-size:14px;


    margin-bottom:4px;
}




.dt-footer-col a{


    color:
    rgba(255,255,255,0.60);


    text-decoration:none;


    font-size:13px;


    transition:0.20s ease;
}




.dt-footer-col a:hover{


    color:#00f0ff;


    transform:
    translateY(-1px);
}




/* ===============================
🔥 BOTTOM
=============================== */


.dt-footer-bottom{


    width:100%;


    margin-top:26px;


    padding-top:14px;


    border-top:
    1px solid rgba(255,255,255,0.05);


    display:flex;


    flex-direction:column;


    align-items:center;
    justify-content:center;


    text-align:center;


    gap:8px;


    color:
    rgba(255,255,255,0.42);


    font-size:11px;
}




.footer-dna{


    letter-spacing:2px;


    color:
    rgba(0,240,255,0.65);
}




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


@media(max-width:768px){


    .dt-footer{


        padding:
        28px 14px 14px;


        border-radius:20px;


        max-width:94%;
    }


    .dt-footer-top{


        gap:22px;
    }


    .dt-footer-links{


        gap:24px;
    }


    .dt-footer-brand h2{


        font-size:24px;
    }


    .dt-footer-brand p{


        font-size:12px;


        line-height:1.5;
    }


}