/* ============================================================
   Sakurumii · footer.css
   页脚：严格参照 image.png（Activision 风格页脚）
   多列链接 + 回到顶部 + 底部居中品牌标 + 版权行
   ============================================================ */

footer.site-footer{
  position:relative;z-index:10;background:#000;
  border-top:1px solid rgba(230,230,230,.14);
  padding:0 0 40px;
}
.site-footer .ft-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

/* 顶部行：回到顶部（右上） */
.ft-top{display:flex;justify-content:flex-end;padding:22px 0 0}
.back-top{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:11px;line-height:1;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--w2);
  padding:10px 0;transition:color .2s;
}
.back-top svg{width:14px;height:14px;fill:currentColor;transition:transform .25s ease}
.back-top:hover{color:var(--w1)}
.back-top:hover svg{transform:translateY(-3px)}

/* 分隔线 */
.ft-rule{border:0;height:1px;width:100%;background:rgba(230,230,230,.12);margin:18px 0 34px}

/* 四列 */
.ft-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px}
.ft-col{grid-column:span 3}
.ft-col h4{
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--g1);margin-bottom:18px;
}
.ft-col ul{display:flex;flex-direction:column;gap:11px}
.ft-col a{display:inline-flex;align-items:center;gap:8px;font-size:14px;line-height:20px;font-weight:500;color:var(--w2);transition:color .2s}
.ft-col a:hover{color:var(--w1)}
.ft-col a svg{width:14px;height:14px;fill:currentColor;flex:none;opacity:.55}

/* 社交图标行 */
.ft-social{display:flex;flex-direction:row;gap:10px;flex-wrap:wrap}
.ft-social a{width:36px;height:36px;display:grid;place-items:center;color:var(--w2);border:1px solid rgba(230,230,230,.16);transition:color .2s,border-color .2s,background .2s}
.ft-social a:hover{color:var(--w1);border-color:rgba(230,230,230,.4);background:rgba(255,255,255,.06)}
.ft-social svg{width:16px;height:16px;fill:currentColor}
.ft-note{margin-top:16px;font-size:12px;line-height:18px;color:var(--g1);font-weight:500;max-width:260px;text-wrap:pretty}

/* 底部行：品牌区（左） + 竖向联系我们（右） */
.ft-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:26px;
  border-top:1px solid rgba(230,230,230,.12);margin-top:44px;padding:34px 0 8px;
}
.ft-brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.ft-brand .mark{display:flex;align-items:center;gap:16px;color:var(--w2);transform:translateX(-6px)}
.ft-brand .mark .wordmark{font-size:30px;line-height:30px;letter-spacing:.02em}
.ft-brand .mark .wordmark sup{color:var(--o)}
.ft-brand .copy{margin-top:6px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--g1)}
.ft-brand .copy a{color:var(--g1);transition:color .2s}
.ft-brand .copy a:hover{color:var(--w1)}

/* Cloudflare 与 sakurumii 相同大小并列 */
.ft-host{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--head);font-weight:600;font-size:30px;line-height:30px;letter-spacing:.02em;
  color:var(--w2);
}
.ft-host img{height:24px;width:auto;flex:none;filter:invert(1) opacity(.75)}

/* 竖向联系我们：图标 + 文字，特别小 */
.ft-contact{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.ft-contact a{display:inline-flex;align-items:center;gap:8px;color:var(--w2);font-size:13px;line-height:16px;font-weight:500;transition:color .2s,transform .2s}
.ft-contact a:hover{color:var(--o);transform:translateX(2px)}
.ft-contact svg{width:15px;height:15px;fill:currentColor;flex:none}

@media (max-width:1023px){
  .ft-col{grid-column:span 6;margin-bottom:28px}
  .ft-cols{row-gap:8px}
}
@media (max-width:639px){
  .ft-col{grid-column:1/-1}
  .back-top{min-height:44px;align-items:center}
  .ft-social a{width:40px;height:40px}
  .ft-bottom{align-items:flex-start}
  .ft-contact{flex-direction:row;gap:14px;flex-wrap:wrap}
}