/* Site footer · one footer for every page (the home footer, matched to the Framer pager).
   Needs the Google fonts "Bitcount Prop Single", "VT323" and "Inter" (900 italic) on the page. */
.foot { background: #0D0D0D; padding: 120px 0 40px; color: #fff; }
.fwrap { width: min(1280px, calc(100% - 48px)); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
.f-left { display: flex; flex-direction: column; }
.f-line { font: 400 32px/46px "Bitcount Prop Single", ui-monospace, monospace; color: #fff; }
.f-me { margin-top: 85px; }
.f-name { font: 400 20px/30px "Bitcount Prop Single", ui-monospace, monospace; color: #FF4545; }
.f-role, .f-copy { font: 400 16px/28px "Bitcount Prop Single", ui-monospace, monospace; color: #C2C2C2; }
.f-copy { margin-top: 86px; }

.pager { position: relative; flex: none; width: 390px; padding: 24px; border-radius: 40px; background: #1C1C1C; box-shadow: inset 0 0 12px rgba(8,8,8,.5); animation: levitate 6s ease-in-out infinite; will-change: transform; }
/* Slow float, like it is hanging in low gravity */
@keyframes levitate { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(-0.4deg); } }
/* Grain, as on the Framer pager: the texture tile at 256px, 4% opacity */
.pager::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: url("footer-grain.png") repeat left top / 256px auto; opacity: .04; pointer-events: none; }
.pager > * { position: relative; }
.pg-screen-wrap { background: #171717; border-radius: 24px; padding: 24px; box-shadow: inset 0 0 4px #080808; }
.pg-screen { height: 120px; padding: 8px 16px; border-radius: 16px; background: #A3C959; color: #000; font: 400 14px/16.8px "VT323", monospace; }
.pg-top { display: flex; justify-content: space-between; gap: 12px; white-space: nowrap; }
.pg-mid { display: grid; text-align: center; margin-top: 20px; }
.pg-mid b { font-weight: 400; font-size: 20px; line-height: 24px; color: #1D2029; margin-top: 2px; white-space: nowrap; }
.pg-brand { margin-top: 24px; font: italic 900 12px/14.4px "Inter", sans-serif; color: #757575; }
.pg-bottom { display: flex; align-items: center; margin-top: 24px; padding-left: 24px; }
.pg-grille { flex: none; display: flex; gap: 5px; width: 44px; }
.pg-grille i { width: 6px; height: 32px; border-radius: 3px; background: #2A2A2A; transform: skewX(-18deg); box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.pg-btn {
  flex: 1; height: 70px; display: grid; place-items: center; border-radius: 40px; background: #C48818; color: #000;
  font: 500 16px/22.4px "Inter", sans-serif; letter-spacing: -0.32px; box-shadow: 0 1px 8px #080808, inset 0 0 8px #080808;
  transition: transform .15s ease, filter .2s ease;
}
.pg-btn:hover { filter: brightness(1.08); }
.pg-btn:active { transform: translateY(2px); }
.f-line br { display: inline; }

@media (max-width: 809.98px) {
  .foot { padding: 96px 0 40px; }
  .fwrap { width: calc(100% - 32px); flex-direction: column; align-items: stretch; gap: 32px; }
  .f-left { display: contents; }
  .f-line { order: 1; font-size: 24px; line-height: 46px; }
  .f-line br { display: none; }
  .pager { order: 2; width: 100%; }
  .f-me { order: 3; margin-top: 0; }
  .f-copy { order: 4; margin-top: -16px; }
}
@media (prefers-reduced-motion: reduce) {
  .pager { animation: none !important; }
}