/* ===== Social Links Page (Namespace: vslk-) ===== */
#socialLinks{
  --bg:#0b1220; --panel:#0f172a; --ink:#e2e8f0; --mut:#94a3b8;
  --ring:#334155;
  --ig:#e1306c; --fb:#1877f2; --x:#0f1419; --in:#0a66c2; --yt:#ff0000;
}
.vslk{ min-height:100svh; display:grid; place-items:center; background:var(--bg); color:var(--ink); }
.vslk__wrap{ width:min(900px, calc(100% - 32px)); margin:auto; text-align:center; }
.vslk__title{ margin:18px 0 22px; font-weight:1000; font-size:clamp(28px,5.5vw,48px); letter-spacing:.02em; color:#e2e8f0; }

.vslk__grid{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns: repeat(5, 1fr); gap:16px;
}
.vslk__btn{
  display:grid; place-items:center; height:90px; border-radius:18px;
  background:var(--panel); color:var(--ink); text-decoration:none; font-size:40px;
  border:1px solid rgba(226,232,240,.12);
  transition:transform .2s, box-shadow .25s, border-color .2s, background .2s;
  transform-style:preserve-3d; perspective:700px; will-change:transform;
}
.vslk__btn:hover{
  transform:translateY(-4px) scale(1.03);
  border-color:rgba(226,232,240,.22);
  box-shadow:0 20px 54px rgba(2,6,23,.45);
}

/* Brand glows */
.vslk--ig:hover{ box-shadow:0 18px 60px color-mix(in oklab, var(--ig) 50%, transparent); }
.vslk--fb:hover{ box-shadow:0 18px 60px color-mix(in oklab, var(--fb) 50%, transparent); }
.vslk--x:hover { box-shadow:0 18px 60px color-mix(in oklab, var(--x) 50%, transparent); }
.vslk--in:hover{ box-shadow:0 18px 60px color-mix(in oklab, var(--in) 50%, transparent); }
.vslk--yt:hover{ box-shadow:0 18px 60px color-mix(in oklab, var(--yt) 50%, transparent); }

@media (max-width:900px){ .vslk__grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:520px){ .vslk__grid{ grid-template-columns: repeat(2, 1fr); } .vslk__btn{ height:82px; font-size:36px; } }

@media (prefers-reduced-motion:reduce){ .vslk__btn{ transition:none !important; } }







/* Brand icon colors */
.vslk--fb i{ color:#1877F2; }              /* Facebook Blue */ 
.vslk--in i{ color:#0A66C2; }              /* LinkedIn Blue */
.vslk--yt i{ color:#FF0000; }              /* YouTube Red  */

/* Instagram: text gradient inside icon */
.vslk--ig i{
  color:transparent;
  background:
    linear-gradient(45deg,#F58529,#FEDA77,#DD2A7B,#8134AF,#515BD4);
  -webkit-background-clip:text; background-clip:text;
}

/* X (Twitter): brand = black; keep contrast on dark bg */
.vslk--x{ background:#ffffff; }
.vslk--x i{ color:#000000; }

/* Brand glows on hover */
.vslk--fb:hover{ box-shadow:0 18px 60px rgba(24,119,242,.45); }
.vslk--in:hover{ box-shadow:0 18px 60px rgba(10,102,194,.45); }
.vslk--yt:hover{ box-shadow:0 18px 60px rgba(255,0,0,.45); }
.vslk--ig:hover{ box-shadow:0 18px 60px rgba(225,48,108,.45); }  /* one of IG stops */
.vslk--x:hover { box-shadow:0 18px 60px rgba(0,0,0,.35); }




/* Back button (top-left) */
.vslk__back{
  position:fixed; top:calc(16px + env(safe-area-inset-top)); left:calc(16px + env(safe-area-inset-left));
  width:44px; height:44px; border-radius:12px; z-index:1000;
  display:grid; place-items:center; font-size:22px;
  color:#e2e8f0; background:#0f172a; border:1px solid rgba(226,232,240,.12);
  box-shadow:0 12px 32px rgba(2,6,23,.35);
  transition:transform .2s, background .2s, border-color .2s, box-shadow .2s;
}
.vslk__back:hover{ transform:translateY(-2px); background:#111827; border-color:rgba(226,232,240,.22); box-shadow:0 18px 48px rgba(2,6,23,.45); }
/* 3D tilt micro-interaction */
.vslk__back{ transform-style:preserve-3d; perspective:700px; }
.vslk__back:hover i{ transform:translateZ(10px); }