:root {
      --discord: #5865F2;
      --roblox: #E8192C;
      --saweria: #FF6B35;
      --sociabuzz: #8B5CF6;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'DM Sans', sans-serif;
      background: #0a0a0f;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow-x: hidden;
    }

    /* Animated background blobs */
    .blob {
      position: fixed;
      border-radius: 50%;
      filter: blur(80px);
      opacity: 0.15;
      pointer-events: none;
      animation: floatBlob 10s ease-in-out infinite;
    }
    .blob-1 { width: 400px; height: 400px; background: var(--discord); top: -100px; left: -100px; animation-delay: 0s; }
    .blob-2 { width: 300px; height: 300px; background: var(--roblox); bottom: -80px; right: -80px; animation-delay: 3s; }
    .blob-3 { width: 250px; height: 250px; background: var(--sociabuzz); bottom: 30%; left: 10%; animation-delay: 6s; }

    @keyframes floatBlob {
      0%, 100% { transform: translate(0, 0) scale(1); }
      33% { transform: translate(20px, -20px) scale(1.05); }
      66% { transform: translate(-15px, 15px) scale(0.95); }
    }

    /* Card glow on hover */
    .link-card {
      position: relative;
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      animation: slideUp 0.5s ease both;
    }
    .link-card:hover { transform: translateY(-4px) scale(1.015); }
    .link-card::before {
      content: '';
      position: absolute;
      inset: -1px;
      border-radius: 1rem;
      background: var(--card-glow);
      opacity: 0;
      transition: opacity 0.25s;
      z-index: -1;
      filter: blur(12px);
    }
    .link-card:hover::before { opacity: 0.6; }

    @keyframes slideUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .link-card:nth-child(1) { animation-delay: 0.1s; }
    .link-card:nth-child(2) { animation-delay: 0.2s; }
    .link-card:nth-child(3) { animation-delay: 0.3s; }
    .link-card:nth-child(4) { animation-delay: 0.4s; }

    /* Avatar pulse */
    .avatar-ring {
      animation: pulsRing 2.5s ease-in-out infinite;
    }
    @keyframes pulsRing {
      0%, 100% { box-shadow: 0 0 0 0px rgba(255,255,255,0.1); }
      50%       { box-shadow: 0 0 0 8px rgba(255,255,255,0); }
    }

    /* Icon bounce on hover */
    .link-card:hover .icon-wrap {
      animation: iconBounce 0.4s ease;
    }
    @keyframes iconBounce {
      0%   { transform: scale(1); }
      40%  { transform: scale(1.25); }
      70%  { transform: scale(0.92); }
      100% { transform: scale(1); }
    }

    /* Shimmer bar */
    .shimmer-bar {
      background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
      background-size: 200% 100%;
      animation: shimmer 2s linear infinite;
    }
    @keyframes shimmer {
      from { background-position: -200% center; }
      to   { background-position: 200% center; }
    }

    /* Header fade-in */
    .header-anim {
      animation: fadeDown 0.7s ease both;
    }
    @keyframes fadeDown {
      from { opacity: 0; transform: translateY(-16px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* Noise grain overlay */
    body::after {
      content: '';
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: 0.03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 128px 128px;
    }