:root { --footer-h: 56px; }          /* keep this in sync with your footer height */
body { padding-bottom: var(--footer-h); }  /* prevent content being covered */
/* --- Footer --- */
.site-footer{
  position: fixed;            /* was: relative */
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);    /* match the body padding */
  padding: 10px 0;            /* tweak for your layout */
  z-index: 50;                /* above background/starfield */
  margin-top: 3rem;
  padding: 14px 0;
  color:#cbd5e1;
  background: linear-gradient(180deg, rgba(15,23,42,.4), rgba(2,6,23,.46));
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  border-top: 1px solid rgba(250,204,21,.18);
  box-shadow:
    inset 0 1px 0 rgba(56,189,248,.15),
    0 -6px 24px rgba(14,165,233,.06);
  z-index: 5;
}
.site-footer::before{
  /* thin glowing line */
  content:"";
  position:absolute; left:0; right:0; top:-1px; height:1px;
  background: linear-gradient(90deg, rgba(56,189,248,.45), rgba(250,204,21,.35));
}

.footer-wrap{
  max-width: 80rem; /* ~1280px */
  margin: 0 auto;
  padding: 0 1rem;
  display:flex; align-items:center; gap:1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.footer-left{ display:flex; align-items:center; gap:.75rem; }
.footer-brand{
  font-weight: 800; letter-spacing:.3px; text-transform: uppercase;
  color:#e5e7eb; text-decoration:none;
  text-shadow:0 0 6px rgba(56,189,248,.45);
}
.footer-brand:hover{ color:#facc15; text-shadow:0 0 8px rgba(250,204,21,.55); }

.footer-motto{
  font-size:.95rem; color:#94a3b8;
  padding-left:.75rem; border-left:1px solid rgba(148,163,184,.25);
}

.footer-links{ display:flex; align-items:center; gap:.85rem; }
.footer-link{
  display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; text-decoration:none; color:#cbd5e1;
  padding:.35rem .6rem; border-radius:.5rem;
  transition: transform .15s ease, color .15s ease, box-shadow .2s ease, background .2s ease;
  background: rgba(2,6,23,.35); border:1px solid rgba(56,189,248,.22);
}
.footer-link svg{ width:18px; height:18px; color:#5865F2; }
.footer-link:hover{
  color:#0ea5e9; box-shadow:0 0 10px rgba(56,189,248,.45);
  background: rgba(2,6,23,.55); border-color: rgba(56,189,248,.45);
}
.footer-discord:hover{ color:#facc15; box-shadow:0 0 10px rgba(250,204,21,.45); }

.footer-copy{ font-size:.9rem; color:#94a3b8; }

/* --- Back to top button --- */
.back-to-top{
  position: fixed; right: 20px; bottom: 22px;
  width:44px; height:44px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid rgba(56,189,248,.35);
  background: radial-gradient(100% 100% at 50% 0%, rgba(56,189,248,.25), rgba(250,204,21,.2));
  box-shadow: 0 0 10px rgba(56,189,248,.35), 0 0 16px rgba(250,204,21,.28);
  color:#e5e7eb; cursor:pointer; z-index: 40;
  opacity:0; transform: translateY(8px); pointer-events:none;
  transition: opacity .25s ease, transform .25s ease, box-shadow .2s ease, background .2s ease;
}
.back-to-top svg{ width:20px; height:20px; }
.back-to-top.show{ opacity:1; transform: translateY(0); pointer-events:auto; }
.back-to-top:hover{
  background: linear-gradient(145deg, rgba(56,189,248,.35), rgba(250,204,21,.28));
  box-shadow: 0 0 12px rgba(56,189,248,.55), 0 0 18px rgba(250,204,21,.45);
}
.back-to-top:focus{ outline:none; box-shadow: 0 0 0 3px rgba(56,189,248,.45); }

/* small screens */
@media (max-width: 640px){
  .footer-wrap{ justify-content:center; text-align:center; gap:.5rem; }
  .footer-links{ order:3; }
  .footer-copy{ width:100%; order:4; }
}

/* motion-respect */
@media (prefers-reduced-motion: reduce){
  .back-to-top{ transition:none; }
}

/* Footer sizing — a smidge taller */
:root { --footer-h: 68px; }        /* was ~56px */
body { padding-bottom: var(--footer-h); }

/* Footer wrapper */
.site-footer{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  height: var(--footer-h);
  z-index: 50;
  backdrop-filter: blur(8px);
}

/* Keep content vertically centered and give the CTA equal air top/bottom */
.footer-inner{
  height: 100%;
  display: flex;
  align-items: center;       /* centers the Discord button nicely */
  justify-content: space-between;
  gap: 16px;
  padding-inline: 18px;
}

/* Brand + motto keep their glow */
.footer-brand{ display:flex; align-items:center; gap:10px; }
.footer-motto{ opacity: .9; }

/* ========== Discord CTA (footer button) ========== */

/* If your link already has a class, add .footer-discord to it (or this rule also
   matches .footer-cta a to be defensive). */
.footer-discord,
.footer-cta a{
  --ring: rgba(88,101,242,.45);           /* discord indigo */
  --glow1: rgba(88,101,242,.35);
  --glow2: rgba(250,204,21,.25);

  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;                            /* ensures equal top/bottom space */
  padding: 0 16px;
  border-radius: 999px;
  font-weight: 700;
  color: #e7eaff;
  text-decoration: none;

  background:
    radial-gradient(120% 140% at 10% 10%, rgba(56,189,248,.18), transparent 40%),
    radial-gradient(120% 140% at 90% 90%, rgba(250,204,21,.14), transparent 45%),
    linear-gradient(145deg, #5865F2 0%, #7381FF 100%);

  border: 1px solid var(--ring);
  box-shadow:
    0 0 0 2px rgba(15,23,42,.5) inset,
    0 6px 18px -6px var(--glow1),
    0 0 14px -2px var(--glow2);
  transition: transform .16s ease, box-shadow .18s ease, filter .18s ease;
}

.footer-discord:hover,
.footer-cta a:hover{
  transform: translateY(-1px);
  box-shadow:
    0 0 0 2px rgba(15,23,42,.6) inset,
    0 10px 24px -8px rgba(115,129,255,.55),
    0 0 18px -2px rgba(56,189,248,.45);
  filter: saturate(1.05);
}

.footer-discord:active,
.footer-cta a:active{
  transform: translateY(0);
}

.footer-discord svg{
  width: 18px; height: 18px;
  filter: drop-shadow(0 0 4px rgba(255,255,255,.25));
}

/* ========== Back to top button ========== */

#backToTop{
  /* nudge diagonally inward a bit more */
  right: 28px;          /* was closer to edge */
  bottom: calc(var(--footer-h) + 22px);
}

@media (max-width: 768px){
  :root { --footer-h: 64px; }               /* slightly shorter on mobile */
  .footer-discord, .footer-cta a{ height: 38px; padding: 0 14px; }
  #backToTop{ right: 20px; bottom: calc(var(--footer-h) + 18px); }
}