/* ---------- site footer: the "Wordmark" look (dark, small mono headings, the name set huge along the bottom) ---------- */
#site-footer{
  --ft-bg:#17110F; --ft-text:#D9CFCB; --ft-muted:#A99DA1; --ft-head:#F87171; --ft-line:rgba(255,255,255,.1);
  position:relative; overflow:hidden; background:var(--ft-bg); color:var(--ft-text);
}
#site-footer [hidden]{display:none !important}
#site-footer p{color:var(--ft-muted)}
#site-footer a{transition:color .25s var(--ease), transform .3s var(--ease)}
#site-footer a:focus-visible,#site-footer button:focus-visible{outline:3px solid #fff; outline-offset:3px; border-radius:4px}

.foot-main-section{padding:60px 0 0}
.foot-main{position:relative; z-index:1; display:grid; grid-template-columns:3fr repeat(4,minmax(0,1fr)); gap:36px; align-items:start}
.foot-brand .logo{color:#fff}
.foot-brand .logo-mark{transition:transform .4s var(--ease-back)}
.foot-brand .logo:hover .logo-mark{transform:rotate(-12deg) scale(1.08)}
.foot-brand p{margin:12px 0 0; font-size:.88rem; max-width:46ch; line-height:1.7}
.foot-brand .logo + p{margin-top:18px}
.foot-brand .pay-row{margin-top:20px}

.foot-col h4{font:600 .7rem 'JetBrains Mono',ui-monospace,monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--ft-head); margin:4px 0 18px}
.foot-col a{display:block; width:fit-content; font-size:.92rem; color:var(--ft-text); margin-bottom:11px}
.foot-col a:hover{color:#fff; transform:translateX(4px)}
.foot-col a.foot-wa{display:flex; align-items:center; gap:8px; color:#86EFAC}
.foot-col a.foot-wa:hover{color:#BBF7D0}

.pay-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:0}
#site-footer .pay-badge{height:48px; border-radius:11px; box-shadow:0 6px 16px -10px rgba(0,0,0,.7)}
#site-footer .pay-logo{height:48px}

/* the signature: the name, huge, outlined, fading into red */
.foot-mark{position:relative; z-index:0; container-type:inline-size; margin-top:30px; user-select:none; pointer-events:none}
.foot-mark span{display:block; text-align:center; white-space:nowrap; font:800 23.5cqi/.8 'Outfit','Plus Jakarta Sans',sans-serif; letter-spacing:-.05em; color:transparent; -webkit-text-stroke:1.5px rgba(255,255,255,.14); padding-bottom:.06em}
.foot-mark b{font:inherit; background:linear-gradient(180deg,rgba(220,38,38,.6),rgba(220,38,38,0) 88%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:0}

.foot-bottom-section{position:relative; z-index:1; border-top:1px solid var(--ft-line); padding:20px 0 26px}
.foot-bottom{display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; justify-content:space-between; font-size:.82rem; color:var(--ft-muted)}
.foot-top-btn{width:40px; height:40px; border-radius:50%; border:1.5px solid rgba(255,255,255,.3); background:transparent; display:flex; align-items:center; justify-content:center; color:#fff; flex:none; cursor:pointer; transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease-back), border-color .3s var(--ease)}
.foot-top-btn svg{transform:rotate(-90deg); transition:transform .3s var(--ease-back)}
.foot-top-btn:hover{background:#fff; color:var(--ft-bg); border-color:#fff; transform:translateY(-3px)}
.foot-top-btn:hover svg{transform:rotate(-90deg) translateX(3px)}

@media (max-width:980px){
  .foot-main{grid-template-columns:repeat(2,1fr); gap:34px 24px}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:640px){
  .foot-main-section{padding-top:44px}
  .foot-mark{margin-top:20px}
}
@media (prefers-reduced-motion: reduce){
  #site-footer a,.foot-top-btn,.foot-brand .logo-mark{transition:none}
}