/* ==========================================================
   STAR WAR FOOTER MOTION V12
   Full-width corporate footer
   CSS-only / GPU-friendly / no JS
   ========================================================== */

:root{
    --sw-footer-navy:#04182b;
    --sw-footer-navy-2:#06233d;
    --sw-footer-blue:#0878ef;
    --sw-footer-cyan:#43cdf8;
    --sw-footer-white:#ffffff;
    --sw-footer-muted:#9eb4ca;
}


/* ==========================================================
   CTA -> FOOTER CONTINUITY
   Tạo nền full-width phía sau CTA để footer không bị đứt
   ========================================================== */

.sw-agency-cta-section{
    position:relative;
    padding-bottom:0 !important;
    background:#f5f7fb !important;
    z-index:4;
}

.sw-agency-cta{
    position:relative;
    z-index:8;
    margin-bottom:-44px !important;
    box-shadow:
        0 30px 80px rgba(0,38,86,.18),
        0 8px 30px rgba(0,80,180,.10);
}


/* ==========================================================
   FULL-WIDTH FOOTER BACKGROUND
   ========================================================== */

.sw-agency-footer{
    position:relative !important;
    isolation:isolate;
    overflow:hidden !important;

    margin:0 !important;
    padding:0 !important;

    color:#dce8f4 !important;

    background:
        radial-gradient(
            circle at 14% 18%,
            rgba(0,126,255,.17) 0,
            rgba(0,126,255,.06) 24%,
            transparent 43%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(67,205,248,.10) 0,
            transparent 35%
        ),
        linear-gradient(
            122deg,
            #04182b 0%,
            #06233d 48%,
            #041a2f 100%
        ) !important;

    border-top:0 !important;
}


/* ==========================================================
   MOVING GRID BACKGROUND
   Chỉ transform layer, không animate background-position
   ========================================================== */

.sw-agency-footer::before{
    content:"" !important;

    position:absolute !important;
    z-index:-2;

    width:120% !important;
    height:125% !important;

    left:-10% !important;
    top:-12% !important;

    border:0 !important;
    border-radius:0 !important;

    opacity:.13;

    background-image:
        linear-gradient(
            rgba(255,255,255,.12) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.12) 1px,
            transparent 1px
        );

    background-size:64px 64px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.8),
            rgba(0,0,0,.32) 74%,
            transparent
        );

    pointer-events:none;

    will-change:transform;

    animation:
        swFooterGridMove 20s linear infinite;
}


/* ==========================================================
   AMBIENT LIGHT
   ========================================================== */

.sw-agency-footer::after{
    content:"" !important;

    position:absolute !important;
    z-index:-1;

    width:680px !important;
    height:680px !important;

    right:-260px !important;
    bottom:-390px !important;

    left:auto !important;
    top:auto !important;

    border:1px solid rgba(67,205,248,.14) !important;
    border-radius:50% !important;

    background:
        radial-gradient(
            circle at 38% 34%,
            rgba(14,122,239,.22),
            rgba(14,122,239,.05) 40%,
            transparent 68%
        ) !important;

    opacity:1 !important;

    pointer-events:none;

    will-change:transform;

    animation:
        swFooterOrb 12s ease-in-out infinite alternate;
}


/* ==========================================================
   MAIN FOOTER GRID
   ========================================================== */

.sw-agency-footer .sw-container{
    position:relative;
    z-index:2;
}

.sw-agency-footer-grid{
    position:relative !important;
    z-index:2 !important;

    padding-top:112px !important;
    padding-bottom:58px !important;

    gap:64px !important;
}


/* ==========================================================
   COMPANY
   ========================================================== */

.sw-agency-footer-company{
    max-width:350px !important;
}

.sw-agency-footer-logo{
    width:174px !important;

    margin-bottom:25px !important;
    padding:10px 14px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:13px;

    background:rgba(255,255,255,.96);

    box-shadow:
        0 12px 36px rgba(0,0,0,.16);

    transition:
        transform .35s cubic-bezier(.16,1,.3,1),
        box-shadow .35s ease;
}

.sw-agency-footer-logo:hover{
    transform:translate3d(0,-4px,0);

    box-shadow:
        0 18px 42px rgba(0,0,0,.22);
}

.sw-agency-footer-company h3{
    color:#ffffff !important;
    font-size:15px !important;
}

.sw-agency-footer-company p{
    color:#a9bdd0 !important;

    font-size:13px !important;
    line-height:1.8 !important;
}

.sw-agency-footer-company > span{
    margin-top:17px !important;

    color:#55cfff !important;

    font-size:11px !important;
    letter-spacing:.02em;
}


/* ==========================================================
   HEADINGS
   ========================================================== */

.sw-agency-footer-column h3,
.sw-agency-footer-contact h3{
    position:relative;

    margin-bottom:23px !important;

    color:#ffffff !important;

    font-size:14px !important;
}

.sw-agency-footer-column h3::after,
.sw-agency-footer-contact h3::after{
    content:"";

    display:block;

    width:28px;
    height:2px;

    margin-top:9px;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            var(--sw-footer-cyan),
            var(--sw-footer-blue)
        );
}


/* ==========================================================
   FOOTER LINKS
   ========================================================== */

.sw-agency-footer-column nav{
    gap:5px !important;
}

.sw-agency-footer-column a{
    position:relative;

    display:flex;
    align-items:center;

    min-height:34px;

    padding-left:0;

    color:#a9bdd0 !important;

    font-size:13px !important;

    transition:
        color .25s ease,
        transform .35s cubic-bezier(.16,1,.3,1),
        padding-left .35s cubic-bezier(.16,1,.3,1) !important;
}

.sw-agency-footer-column a::before{
    content:"";

    width:0;
    height:1px;

    margin-right:0;

    background:
        linear-gradient(
            90deg,
            var(--sw-footer-cyan),
            var(--sw-footer-blue)
        );

    transition:
        width .35s cubic-bezier(.16,1,.3,1),
        margin-right .35s cubic-bezier(.16,1,.3,1);
}

.sw-agency-footer-column a::after{
    content:"→";

    margin-left:7px;

    color:var(--sw-footer-cyan);

    opacity:0;

    transform:translate3d(-6px,0,0);

    transition:
        opacity .25s ease,
        transform .35s cubic-bezier(.16,1,.3,1);
}

.sw-agency-footer-column a:hover{
    color:#ffffff !important;

    transform:none !important;
}

.sw-agency-footer-column a:hover::before{
    width:17px;
    margin-right:8px;
}

.sw-agency-footer-column a:hover::after{
    opacity:1;

    transform:translate3d(0,0,0);
}


/* ==========================================================
   CONTACT BOX
   ========================================================== */

.sw-agency-footer-contact{
    position:relative;

    max-width:370px !important;

    padding:23px 24px;

    border:1px solid rgba(255,255,255,.09);
    border-radius:18px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        );

    transition:
        transform .4s cubic-bezier(.16,1,.3,1),
        border-color .3s ease,
        background .3s ease;
}

.sw-agency-footer-contact:hover{
    transform:translate3d(0,-4px,0);

    border-color:rgba(67,205,248,.24);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.075),
            rgba(255,255,255,.025)
        );
}

.sw-agency-company-name{
    color:#d9e7f3 !important;
}

.sw-agency-contact-line{
    color:#d4e3ef !important;
}

.sw-agency-contact-line i{
    color:#49cfff !important;

    transition:
        transform .3s cubic-bezier(.16,1,.3,1);
}

.sw-agency-contact-line:hover i{
    transform:translate3d(3px,0,0);
}

.sw-agency-contact-line span{
    color:#728da6 !important;
}

.sw-agency-contact-line p{
    color:#c8d8e6 !important;
}

a.sw-agency-contact-line:hover p{
    color:#ffffff !important;
}


/* ==========================================================
   BOTTOM COPYRIGHT
   ========================================================== */

.sw-agency-footer-bottom{
    position:relative !important;
    z-index:3 !important;

    min-height:76px !important;

    border-top:
        1px solid rgba(255,255,255,.095) !important;

    color:#7890a7 !important;

    overflow:hidden;
}

.sw-agency-footer-bottom::before{
    content:"";

    position:absolute;

    left:0;
    top:-1px;

    width:150px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--sw-footer-cyan),
            var(--sw-footer-blue),
            transparent
        );

    opacity:.8;

    animation:
        swFooterLine 9s cubic-bezier(.45,0,.55,1) infinite;
}


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

@keyframes swFooterGridMove{
    from{
        transform:translate3d(0,0,0);
    }

    to{
        transform:translate3d(64px,64px,0);
    }
}

@keyframes swFooterOrb{
    0%{
        transform:
            translate3d(0,0,0)
            scale(1);
    }

    100%{
        transform:
            translate3d(-55px,-28px,0)
            scale(1.08);
    }
}

@keyframes swFooterLine{
    0%{
        transform:translate3d(-180px,0,0);
    }

    55%,
    100%{
        transform:
            translate3d(
                calc(100vw + 180px),
                0,
                0
            );
    }
}


/* ==========================================================
   TABLET
   ========================================================== */

@media(max-width:1100px){

    .sw-agency-footer-grid{
        gap:44px !important;
    }

    .sw-agency-footer-contact{
        max-width:none !important;
    }
}


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

@media(max-width:760px){

    .sw-agency-cta-section{
        background:
            linear-gradient(
                to bottom,
                #ffffff 0%,
                #ffffff 36%,
                var(--sw-footer-navy) 36%,
                var(--sw-footer-navy) 100%
            ) !important;
    }

    .sw-agency-footer-grid{
        padding-top:52px !important;
        padding-bottom:34px !important;

        gap:34px !important;
    }

    .sw-agency-footer-logo{
        width:158px !important;
    }

    .sw-agency-footer-contact{
        padding:20px !important;
    }

    .sw-agency-footer-bottom{
        min-height:auto !important;

        padding-top:22px !important;
        padding-bottom:25px !important;
    }

    .sw-agency-footer::before{
        opacity:.08;
    }
}


/* ==========================================================
   ACCESSIBILITY / PERFORMANCE
   ========================================================== */

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

    .sw-agency-footer::before,
    .sw-agency-footer::after,
    .sw-agency-footer-bottom::before{
        animation:none !important;
    }

    .sw-agency-footer-logo,
    .sw-agency-footer-contact,
    .sw-agency-footer-column a,
    .sw-agency-footer-column a::before,
    .sw-agency-footer-column a::after{
        transition:none !important;
    }
}

@media(max-width:760px){
    .sw-agency-cta-section{
        background:#f5f7fb !important;
    }

    .sw-agency-cta{
        margin-bottom:-22px !important;
    }

    .sw-agency-footer-grid{
        padding-top:62px !important;
    }
}

/* ==========================================================
   STAR WAR FOOTER V12.2
   CTA OVERLAP + SOFT FOOTER TRANSITION
   ========================================================== */


/* Nền khu CTA vẫn sáng */
.sw-agency-cta-section{
    position:relative !important;
    z-index:8 !important;

    background:#f5f7fb !important;

    /*
     * Kéo footer chui lên phía sau CTA.
     * Đây mới là overlap thật.
     */
    margin-bottom:-56px !important;

    padding-bottom:0 !important;
}


/* CTA nổi phía trên footer */
.sw-agency-cta{
    position:relative !important;
    z-index:10 !important;

    margin-bottom:0 !important;

    transform:translateZ(0);

    box-shadow:
        0 28px 60px rgba(2,36,72,.18),
        0 10px 24px rgba(0,94,200,.10) !important;
}


/* Footer nằm dưới CTA */
.sw-agency-footer{
    position:relative !important;
    z-index:2 !important;

    padding-top:56px !important;

    /*
     * Bỏ cảm giác mảng đen phẳng.
     * Phần đầu footer có ánh xanh ở giữa CTA.
     */
    background:
        radial-gradient(
            ellipse 52% 170px at 50% 0%,
            rgba(11,125,239,.23) 0%,
            rgba(8,83,145,.13) 38%,
            rgba(4,24,43,0) 76%
        ),
        radial-gradient(
            circle at 12% 38%,
            rgba(0,126,255,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 91% 74%,
            rgba(67,205,248,.08),
            transparent 30%
        ),
        linear-gradient(
            120deg,
            #04182b 0%,
            #062640 48%,
            #04192d 100%
        ) !important;
}


/*
 * Nội dung footer xuống thấp hơn,
 * tạo khoảng thở sau CTA.
 */
.sw-agency-footer-grid{
    padding-top:76px !important;
    padding-bottom:58px !important;
}


/*
 * Tạo một đường glow rất nhẹ phía sau CTA.
 * Không phải border cứng.
 */
.sw-agency-footer .sw-container{
    position:relative;
}

.sw-agency-footer .sw-container::before{
    content:"";

    position:absolute;
    top:0;
    left:50%;

    width:min(820px,70vw);
    height:1px;

    transform:translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(67,205,248,.20),
            rgba(15,128,244,.40),
            rgba(67,205,248,.20),
            transparent
        );

    pointer-events:none;
}


/* Footer card liên hệ bớt nặng */
.sw-agency-footer-contact{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        ) !important;

    border-color:rgba(255,255,255,.08) !important;

    box-shadow:
        0 16px 40px rgba(0,0,0,.08);
}


/* Mobile overlap ít hơn */
@media(max-width:760px){

    .sw-agency-cta-section{
        margin-bottom:-28px !important;
    }

    .sw-agency-footer{
        padding-top:28px !important;
    }

    .sw-agency-footer-grid{
        padding-top:54px !important;
    }

    .sw-agency-cta{
        box-shadow:
            0 18px 38px rgba(2,36,72,.16) !important;
    }
}


/* ==========================================================
   STAR WAR FOOTER V12.3
   REAL CTA OVERLAP
   ========================================================== */

/*
 * Reset các thử nghiệm overlap cũ.
 * Section vẫn nằm hoàn toàn trên nền sáng.
 */
.sw-agency-cta-section{
    position:relative !important;
    z-index:5 !important;

    margin:0 !important;
    margin-bottom:0 !important;

    padding-bottom:0 !important;

    background:#f5f7fb !important;

    overflow:visible !important;
}


/*
 * QUAN TRỌNG:
 * Không kéo section/footer.
 * Chỉ dịch chính CTA xuống 48px.
 *
 * transform không thay đổi document flow
 * => CTA thực sự đè lên footer.
 */
.sw-agency-cta{
    position:relative !important;
    z-index:20 !important;

    margin:0 !important;
    margin-bottom:0 !important;

    transform:translate3d(0,48px,0) !important;

    box-shadow:
        0 28px 65px rgba(3,35,67,.22),
        0 10px 25px rgba(6,103,218,.14) !important;
}


/*
 * Footer bắt đầu đúng vị trí tự nhiên.
 * Không còn kéo footer lên bằng negative margin.
 */
.sw-agency-footer{
    position:relative !important;
    z-index:2 !important;

    margin-top:0 !important;

    padding-top:48px !important;

    border-radius:26px 26px 0 0;

    overflow:hidden !important;

    background:
        radial-gradient(
            ellipse 48% 160px at 50% 0%,
            rgba(18,126,235,.18) 0%,
            rgba(9,81,137,.08) 45%,
            transparent 78%
        ),
        radial-gradient(
            circle at 9% 38%,
            rgba(0,126,255,.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 75%,
            rgba(67,205,248,.07),
            transparent 32%
        ),
        linear-gradient(
            118deg,
            #04192d 0%,
            #062740 48%,
            #041a2e 100%
        ) !important;
}


/*
 * CTA đã đè xuống footer 48px.
 * Nội dung footer cần cách đáy CTA đủ rộng.
 */
.sw-agency-footer-grid{
    padding-top:66px !important;
    padding-bottom:58px !important;
}


/*
 * Bỏ đường glow ngang cũ nếu đang có.
 * Nó làm mép chuyển tiếp bị thô.
 */
.sw-agency-footer .sw-container::before{
    display:none !important;
}


/*
 * Tạo ánh sáng rất nhẹ ngay dưới CTA,
 * nhìn giống CTA đang nổi thay vì bị dán vào footer.
 */
.sw-agency-footer > .sw-container::after{
    content:"";

    position:absolute;
    z-index:-1;

    top:0;
    left:50%;

    width:min(900px,74vw);
    height:115px;

    transform:translateX(-50%);

    background:
        radial-gradient(
            ellipse at center top,
            rgba(31,151,255,.17),
            rgba(31,151,255,.045) 48%,
            transparent 74%
        );

    pointer-events:none;
}


/*
 * Contact card nhẹ hơn.
 */
.sw-agency-footer-contact{
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.042),
            rgba(255,255,255,.012)
        ) !important;

    border-color:rgba(255,255,255,.075) !important;

    box-shadow:
        0 16px 40px rgba(0,0,0,.07) !important;
}


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

@media(max-width:760px){

    .sw-agency-cta{
        transform:translate3d(0,24px,0) !important;
    }

    .sw-agency-footer{
        padding-top:24px !important;
        border-radius:18px 18px 0 0;
    }

    .sw-agency-footer-grid{
        padding-top:48px !important;
    }
}


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

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

    .sw-agency-cta{
        transition:none !important;
    }
}