*{box-sizing:border-box}
:root{--radius:20px}
html,body{height:100%}
body{font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.social-card{position:relative;display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;justify-content:flex-start;border-radius:var(--radius);padding:1rem;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));transition:transform .35s ease, background .35s ease, border-color .35s ease;overflow:hidden}
.social-card .icon{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(124,58,237,.18);border:1px solid rgba(124,58,237,.25);transition:transform .3s ease, background .3s ease}
.social-card .icon .icon-img{width:20px;height:20px;display:block;object-fit:contain;filter:invert(1)}
.social-card .label{font-weight:600}
.social-card .hint{font-size:.9rem;opacity:.7}
.social-card::after{content:"";position:absolute;inset:auto -20% 0 -20%;height:60%;background:radial-gradient(120px 40px at 50% 100%,rgba(124,58,237,.25),transparent);transform:translateY(50%);transition:transform .45s ease}
.social-card:hover{transform:translateY(-4px)}
.social-card:hover .icon{transform:scale(1.05);background:rgba(124,58,237,.28)}
.social-card:hover::after{transform:translateY(0)}
.card{height:180px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));display:grid;place-items:center;color:rgba(255,255,255,.6);letter-spacing:.2px}
#parallax-hero{pointer-events:none}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
[data-animate="float"]{animation:float 6s ease-in-out infinite}
#stars{filter:drop-shadow(0 0 2px rgba(255,255,255,.25))}