/* ===================================================
   FOOTER EXTRA — PRODUCTS + SOCIAL (shared across pages)
   (uses :root variables already defined per-page)
=================================================== */
.footer-extra{
  background:var(--bg2);
  border-top:1px solid var(--b1);
  padding:3.2rem 2rem 2.4rem;
  position:relative;
  z-index:10;
}
.footer-extra::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);
  box-shadow:0 0 15px var(--neon);
  opacity:.3;
}
.footer-extra .fe-wrap{
  max-width:1100px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:2.6rem;
  text-align:left;
}
.fe-heading{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--sub);
  margin-bottom:1.1rem;
}
.fe-links{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.fe-links a{
  color:var(--dim);
  font-size:.86rem;
  font-weight:600;
  text-decoration:none;
  transition:color .25s var(--ease,ease);
  width:fit-content;
}
.fe-links a:hover{ color:var(--neon); }
.fe-social{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.fe-icons{
  display:flex;
  flex-wrap:wrap;
  gap:.85rem;
}
.fe-icons a{
  width:38px;
  height:38px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.04);
  border:1px solid var(--b1);
  color:#fff;
  transition:all .25s var(--ease,ease);
}
.fe-icons a svg{ width:18px; height:18px; }
.fe-icons a:hover{
  background:var(--neon);
  color:var(--bg);
  border-color:var(--neon);
  box-shadow:0 0 16px var(--neon);
  transform:translateY(-2px);
}
@media(max-width:640px){
  .footer-extra .fe-wrap{ flex-direction:column; text-align:center; align-items:center; }
  .fe-social{ align-items:center; }
}