.site-footer{ background: var(--footer-bg); color: var(--footer-txt); padding: 80px 24px 40px; font-weight:500; position:relative; }
.footer-top{ display:flex; justify-content:space-between; align-items:center; gap:16px; max-width:1200px; margin:0 auto; }
.footer-brand{ display:flex; align-items:center; gap:18px;flex: 1 1 auto }
.footer-logo{ height:74px; display:block }
.follow-title{ color:#000; font-size:1.4rem;margin-left: auto;margin-right: 6px;white-space: nowrap; }
.footer-social{ display:flex; gap:16px; align-items:center; }
.footer-social a {
    width: 34px; height: 34px;
    display:flex; align-items:center;
    justify-content:center;
    text-decoration:none;
    transition: all 0.25s ease;
    background: transparent;
}
.footer-social a.social {
    position: relative;
}
.footer-social .qr-popup {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 5px);
    transform: translateX(-50%) translateY(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s cubic-bezier(.2,.9,.3,1);
    z-index: 200;
    min-width: 120px;
    max-width: 220px;
}
.footer-social .qr-popup.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.footer-social .qr-popup::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.12));
}
.footer-social .qr-popup img.qr-img {
    display: block;
    width: 128px;
    height: 128px;
    object-fit: contain;
    border-radius: 6px;
}
@media (max-width: 480px) {
    .footer-social .qr-popup {
        left: 50%;
        bottom: calc(100% + 6px);
        min-width: 90px;
        max-width: 160px;
    }
    .footer-social .qr-popup img.qr-img { width: 96px; height: 96px; }
}
.footer-social a img{
    width: 100%;
    height: 100%;
}
.footer-divider{ border: none; height:1px; background:#efefef; margin:38px auto; max-width:1200px; }
.footer-grid{ max-width:1200px; margin: 6px auto 0; display:grid; grid-template-columns: repeat(7, 1fr); gap:24px; padding:0 6px; }
.col h4{ margin:0 0 12px; font-size:15px; color:var(--footer-txt); font-weight:700 }
.col ul{ list-style:none; padding:0; margin:0 }
.col ul li{ margin:8px 0 }
.col ul li a{ color:var(--footer-muted); text-decoration:none; font-size:14px }

/* 可见性：默认不显示 accordion，移动端显示（下面 media query 会覆盖）*/
.footer-accordion { display: none; }
/* 小屏专用：隐藏原来的 grid，显示 accordion */
@media (max-width: 767px) {
    .footer-grid { display: none !important; }
    .footer-accordion { display: block; max-width: 1200px; margin: 8px auto 0; padding: 0 6px; }
    .footer-accordion .accordion-item {
        border-bottom: 1px solid #efefef;
        padding: 10px 10px;
    }
    .accordion-btn {
        width: 100%;
        background: none;
        border: none;
        padding: 6px 0;
        font-size: 15px;
        font-weight: 700;
        color: var(--footer-txt);
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        touch-action: manipulation;
    }
    .accordion-btn::after {
        content: "+";
        font-size: 20px;
        line-height: 1;
        transition: transform .18s ease;
    }
    .accordion-btn[aria-expanded="true"]::after { content: "−"; }
    .accordion-panel {
        box-sizing: border-box;
        max-height: 0;
        overflow: hidden;
        transition: max-height .36s cubic-bezier(.2,.9,.25,1), padding .12s ease;
        padding-top: 0;
        padding-bottom: 0;
    }
    .accordion-panel.open { padding-top: 6px; padding-bottom: 6px; }
    .accordion-inner {
        transform-origin: top;
        transform: scaleY(0);
        opacity: 0;
        transition: transform .28s cubic-bezier(.2,.9,.25,1), opacity .18s ease;
        will-change: transform, opacity;
        backface-visibility: hidden;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    .accordion-panel.open .accordion-inner {
        transform: scaleY(1);
        opacity: 1;
    }
    .accordion-panel ul { display: block; margin: 0; padding: 0; list-style: none; }
    .accordion-panel li { margin: 6px 0; display:block; }
    .accordion-panel li a {
        display:block; padding:10px 12px; text-decoration:none; color:var(--footer-muted);
        border-radius:8px; font-size:14px; white-space:normal;
        transition: background .12s ease, color .12s ease;
    }
    .accordion-panel li a:hover,
    .accordion-panel li a:focus {
        background: rgba(11,116,222,0.06);
        color: var(--footer-txt);
        outline: none;
    }
    @media (prefers-reduced-motion: reduce) {
        .accordion-inner,
        .accordion-btn::after {
            transition: none !important;
        }
        .accordion-panel {
            transition: none !important;
        }
    }
}

.footer-links-row{ max-width:1200px; margin:20px auto; padding:0 6px; text-align:center }
.mini-links{ display:inline-block; color:var(--footer-muted); font-size:13px }
.footer-bottom{ max-width:1200px; margin:18px auto 0; padding:12px 6px; display:flex; align-items:center; justify-content:space-between; gap:12px }
.legal{ flex:1; text-align:center; color:var(--footer-muted); font-size:12px; }
.copyright{ margin-bottom: 6px; }

/* back to top */
.back-to-top {
    position: fixed;
    right: 22px;
    bottom: 20px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent) 0%, #0658b3 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(11,116,222,0.18), 0 4px 12px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.35s ease,
    box-shadow 0.3s ease;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
}
.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.back-to-top:not(.show) {
    transform: translateY(12px) scale(0.92);
}
.back-to-top .bt-icon {
    width: 26px;
    height: 26px;
    transition: transform 0.3s ease;
}
.back-to-top:hover {
    transform: translateY(-6px) scale(1.08);
    box-shadow: 0 18px 40px rgba(11,116,222,0.28), 0 6px 18px rgba(0,0,0,0.16);
}
.back-to-top:focus{
    outline: none;
    box-shadow: 0 0 0 6px rgba(11,116,222,0.12);
}
.back-to-top:hover .bt-icon {
    transform: translateY(-2px) rotate(-8deg);
}
.back-to-top .ripple{
    position:absolute;
    width:12px;
    height:12px;
    border-radius:50%;
    transform: translate(-50%,-50%) scale(0);
    background: rgba(255,255,255,0.22);
    animation: ripple-anim .6s cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
    mix-blend-mode: screen;
}
@keyframes ripple-anim{
    from { transform: translate(-50%,-50%) scale(0); opacity: .9; }
    to   { transform: translate(-50%,-50%) scale(8); opacity: 0; }
}
.back-to-top .bt-label{
    position:absolute;
    bottom:calc(100% + 10px);
    right:50%;
    transform: translateX(50%) translateY(6px);
    background: rgba(10,20,40,0.95);
    color: #fff;
    padding:6px 10px;
    border-radius:6px;
    font-size:12px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition: opacity .18s, transform .18s;
}
.back-to-top:hover .bt-label,
.back-to-top:focus .bt-label{
    opacity:1;
    transform: translateX(50%) translateY(0);
}
.back-to-top:active {
    transform: translateY(-2px) scale(0.97);
    transition: transform 0.12s;
}

/* responsive tweaks from original (footer layout on small screens) */
@media(max-width: 767px) {
    .footer-top {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 6px;
    }
    .footer-brand {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
    }
    .footer-brand .follow-title {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: left;
        font-size: 1.25rem;
    }
    .footer-social {
        width: 100%;
        display: flex;
        gap: 20px;
        align-items: center;
        justify-content: flex-start;
        padding-left: 0;
        margin-top: 0;
    }
    .footer-brand .footer-logo,
    .footer-brand img.footer-logo {
        display: none !important;
        width: 0; height: 0;
        visibility: hidden;
    }
}