/* ---------- Social ---------- */
.social{
  text-align:center;
  padding:clamp(84px,9vw,128px) 0;
  background:rgba(0,0,0,0.45);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,215,0,0.20);
  border-bottom:1px solid rgba(255,215,0,0.12);
}
.social-wrap{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:24px;
}
.social h2{
  font-family:"Montserrat",sans-serif;
  color:var(--gold);
  font-size:clamp(1.8rem,2.6vw,2.5rem);
  margin-bottom:10px;
}
.social p{
  color:#d0d0d0;
  max-width:820px;
  margin:0 auto 34px;
  line-height:1.65;
}
.social-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  justify-content:center;
  align-items:center;
  gap:28px;
  max-width:900px;
  margin-inline:auto;
}
.social-grid a{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:120px;
  padding:18px 16px;
  border-radius:16px;
  border:1px solid rgba(255,215,0,0.25);
  background:rgba(18,18,18,0.5);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#fff;
  text-decoration:none;
  transition:.25s;
}
.social-grid a:hover{
  transform:translateY(-3px);
  border-color:rgba(255,215,0,0.55);
  background:rgba(18,18,18,0.62);
}
.social-grid img{
  width:42px;height:42px;object-fit:contain;
  margin-bottom:10px;
  filter:drop-shadow(0 0 4px rgba(255,215,0,0.3));
}
.social-grid span{font-weight:700;font-size:1rem;}
.social-grid a.linktree{
  grid-column:1/-1;
  background:rgba(255,215,0,0.12);
  border-color:rgba(255,215,0,0.42);
}
.social-grid a.linktree:hover{
  background:rgba(255,215,0,0.2);
  border-color:rgba(255,215,0,0.65);
}

/* ---------- Mobile tweaks: avoid blur artifacts + leave room for sticky CTA ---------- */
@media (max-width: 768px){
  .social{
    background: rgba(0,0,0,0.85);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    /* ensure section ends cleanly and CTA appears after it, not over it */
    padding-bottom: calc(100px + env(safe-area-inset-bottom));
  }
  .social-grid{
    gap: 18px;
    max-width: 560px;
  }
  .social-grid a{
    min-height: 96px;
    padding: 14px 12px;
  }
  .social-grid img{
    width: 36px; height: 36px; margin-bottom: 8px;
  }
}