/* social.css */
.social-links {
    display:flex; justify-content:center;
    gap:.5rem; list-style:none;
    flex-wrap:wrap; margin:0; padding:0;
}
.social-links a {
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius:10px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.15);
    color:rgba(255,255,255,.72);
    text-decoration:none; position:relative;
    transition:all .22s cubic-bezier(.4,0,.2,1);
}
.social-links a svg {
    width:46%; height:46%;
    stroke:currentColor; transition:stroke .22s;
}
.social-links a:hover {
    background:rgba(255,255,255,.17);
    border-color:rgba(255,255,255,.38);
    color:#fff; transform:translateY(-2px);
    box-shadow:0 5px 16px rgba(0,0,0,.28);
}
.social-links a:hover svg { stroke:#fff; }

/* Tooltip */
.social-links a::after {
    content:attr(data-title);
    position:absolute; top:-34px; left:50%;
    transform:translateX(-50%) translateY(4px);
    background:rgba(0,28,22,.88); color:#7dede0;
    padding:3px 9px; border-radius:6px;
    font-family:'Outfit',sans-serif;
    font-size:.63rem; font-weight:600;
    white-space:nowrap; opacity:0; visibility:hidden;
    transition:opacity .2s ease,transform .2s ease;
    pointer-events:none; z-index:10;
    border:1px solid rgba(0,163,136,.3);
    letter-spacing:.03em;
}
.social-links a::before {
    content:''; position:absolute; top:-10px; left:50%;
    transform:translateX(-50%);
    border-width:5px; border-style:solid;
    border-color:rgba(0,163,136,.35) transparent transparent transparent;
    opacity:0; visibility:hidden; transition:opacity .2s ease;
}
.social-links a:hover::after,
.social-links a:hover::before {
    opacity:1; visibility:visible;
    transform:translateX(-50%) translateY(0);
}

@media (max-width:767px) {
    .social-links a::after,
    .social-links a::before { display:none; }
    .social-links a { width:36px; height:36px; }
}