﻿/* ===== FOOTER START ===== */

.dna-footer{
    position:relative;
    width:100%;
    background:
    radial-gradient(
        circle at 92% 0%,
        rgba(37,99,235,.12),
        transparent 30%
    ),
    linear-gradient(
        180deg,
        #0f172a,
        #07111f
    );
    border-top:1px solid rgba(96,165,250,.18);
    color:#e5e7eb;
}

.dna-footer-inner{
    width:min(100%, 1760px);
    margin:0 auto;
    padding:clamp(38px, 4vw, 64px) clamp(24px, 4vw, 72px) 0;
}

.dna-footer-main{
    display:grid;
    grid-template-columns:minmax(260px, 1.45fr) repeat(3, minmax(140px, .72fr)) minmax(280px, 1.25fr);
    gap:clamp(28px, 4vw, 72px);
    padding-bottom:clamp(34px, 3.5vw, 54px);
}

.footer-logo{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#ffffff;
    text-decoration:none;
    font-size:clamp(24px, 1.8vw, 32px);
    line-height:1;
    font-weight:800;
}

.footer-logo span span{
    color:#60a5fa;
}

.footer-logo-icon{
    width:clamp(38px, 3vw, 50px);
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    font-size:clamp(16px, 1.2vw, 22px);
    border-radius:12px;
    background:linear-gradient(135deg, #2563eb, #8b5cf6);
    box-shadow:0 14px 34px rgba(99,102,241,.28);
}

.footer-brand p,
.footer-newsletter p{
    margin:clamp(18px, 1.4vw, 24px) 0 0;
    max-width:330px;
    color:#cbd5e1;
    font-size:clamp(13px, .9vw, 16px);
    line-height:1.75;
}

.footer-socials{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:clamp(24px, 2vw, 34px);
}

.footer-socials a, .footer-socials span{
    width:36px;
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#dbeafe;
    text-decoration:none;
    border-radius:50%;
    background:rgba(148,163,184,.14);
    border:1px solid rgba(148,163,184,.14);
    transition:
    transform .2s ease,
    color .2s ease,
    background .2s ease,
    border-color .2s ease;
}

.footer-socials a, .footer-socials span:hover{
    transform:translateY(-2px);
    color:#ffffff;
    background:rgba(37,99,235,.24);
    border-color:rgba(96,165,250,.36);
}

.footer-links,
.footer-newsletter{
    min-width:0;
}

.footer-links h3,
.footer-newsletter h3{
    margin:0 0 clamp(16px, 1.3vw, 22px);
    color:#ffffff;
    font-size:clamp(15px, 1vw, 18px);
    line-height:1.25;
    font-weight:800;
}

.footer-links a{
    display:block;
    width:max-content;
    max-width:100%;
    margin-top:13px;
    color:#cbd5e1;
    text-decoration:none;
    font-size:clamp(13px, .88vw, 15px);
    line-height:1.2;
    transition:
    color .2s ease,
    transform .2s ease;
}

.footer-links a:first-of-type{
    margin-top:0;
}

.footer-links a:hover{
    color:#60a5fa;
    transform:translateX(3px);
}

.footer-subscribe{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    max-width:360px;
    height:54px;
    margin-top:clamp(22px, 1.8vw, 30px);
    padding:6px;
    border:1px solid rgba(148,163,184,.26);
    border-radius:12px;
    background:rgba(15,23,42,.72);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.footer-subscribe input{
    flex:1;
    min-width:0;
    height:100%;
    padding:0 14px;
    color:#ffffff;
    border:none;
    outline:none;
    background:transparent;
    font-size:14px;
}

.footer-subscribe input::placeholder{
    color:#94a3b8;
}

.footer-subscribe button{
    flex:0 0 auto;
    height:100%;
    padding:0 18px;
    color:#ffffff;
    border:none;
    border-radius:8px;
    background:linear-gradient(135deg, #2563eb, #3b82f6);
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(37,99,235,.24);
    transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.footer-subscribe button:hover{
    transform:translateY(-1px);
    box-shadow:0 14px 30px rgba(37,99,235,.32);
}

.dna-footer-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    min-height:72px;
    padding:18px 0;
    border-top:1px solid rgba(148,163,184,.14);
}

.dna-footer-bottom p{
    margin:0;
    color:#cbd5e1;
    font-size:clamp(12px, .82vw, 14px);
}

.footer-legal-links{
    display:flex;
    align-items:center;
    gap:clamp(18px, 2vw, 36px);
}

.footer-legal-links a{
    color:#cbd5e1;
    text-decoration:none;
    font-size:clamp(12px, .82vw, 14px);
    transition:color .2s ease;
}
.footer-legal-links a:hover{
    color:#60a5fa;
}

.footer-back-top{
    position:absolute;
    right:clamp(24px, 2.4vw, 44px);
    bottom:28px;
    width:54px;
    aspect-ratio:1;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    text-decoration:none;
    border:none;
    cursor:pointer;
    border-radius:50%;
    background:linear-gradient(135deg, #4f46e5, #6366f1);
    box-shadow:0 18px 42px rgba(79,70,229,.34);
    transition:
    transform .2s ease,
    box-shadow .2s ease;
}

.footer-back-top:hover{
    transform:translateY(-3px);
    box-shadow:0 24px 52px rgba(79,70,229,.42);
}

@media (max-width:1200px){

    .dna-footer-main{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}

@media (max-width:760px){

    .dna-footer-inner{
        padding-left:16px;
        padding-right:16px;
    }

    .dna-footer-main{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:24px 18px;
    }

    .footer-subscribe{
        max-width:none;
    }

    .footer-brand,
    .footer-newsletter{
        grid-column:1 / -1;
    }

    .footer-links{
        min-width:0;
    }

    .footer-links a{
        width:auto;
        max-width:100%;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .dna-footer-bottom{
        align-items:flex-start;
        flex-direction:column;
    }

    .footer-legal-links{
        flex-wrap:wrap;
        gap:14px 22px;
    }

    .footer-back-top{
        right:18px;
        bottom:22px;
        width:48px;
    }
}

@media (max-width:480px){
    .dna-footer-main{
        grid-template-columns:repeat(3, minmax(0, 1fr));
    }

    .footer-subscribe{
        height:auto;
        align-items:stretch;
        flex-direction:column;
    }

    .footer-subscribe input,
    .footer-subscribe button{
        width:100%;
        height:46px;
    }
}

/* ===== FOOTER END ===== */
