body {
            background-color: transparent; /* Changed to let shader show */
            color: #e4e1ee; /* on-surface */
            overflow-x: hidden;
        }

        .noise-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: -5;
            opacity: 0.05;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        .vignette-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            pointer-events: none;
            z-index: -4;
            background: radial-gradient(circle at center, transparent 30%, rgba(10, 14, 26, 0.8) 100%);
        }

        /* Upgraded Glassmorphism utility */
        .glass-panel {
            background: rgba(18, 24, 41, 0.4); /* bg-surface/40 */
            backdrop-filter: blur(24px);
            -webkit-backdrop-filter: blur(24px);
            border: 1px solid rgba(38, 46, 71, 0.5); /* line/50 */
        }

        .circuit-divider {
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(108, 99, 255, 0.5), transparent);
            position: relative;
            margin: 4rem 0;
        }
        .circuit-divider::before {
            content: '';
            position: absolute;
            top: -2px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 5px;
            background: linear-gradient(90deg, transparent, #38E1D6, transparent);
            filter: blur(2px);
        }


        /* ── Social Flip Card ── */
        .social-card {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #121829;
            border: 1px solid rgba(108, 99, 255, 0.2);
            border-radius: 8px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            overflow: hidden;
            height: 50px;
            width: 200px;
        }
        .social-card::before, .social-card::after {
            content: "";
            position: absolute;
            top: 0;
            width: 50%;
            height: 100%;
            transition: 0.25s linear;
            z-index: 1;
        }
        .social-card::before { left: 0; background-color: #5B52E6; }
        .social-card::after  { right: 0; background-color: #3622ca; }
        .social-card:hover {
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35), 0 10px 10px rgba(0, 0, 0, 0.22);
            border-color: rgba(56, 225, 214, 0.4);
        }
        .social-card:hover .social-card-label { opacity: 0; }
        .social-card:hover::before { opacity: 0.5; transform: translateY(-100%); }
        .social-card:hover::after  { opacity: 0.5; transform: translateY(100%); }
        .social-card-label {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%; height: 100%;
            color: #38E1D6;
            font-family: 'JetBrains Mono', monospace;
            font-size: 12px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase;
            opacity: 1;
            transition: opacity 0.25s;
            z-index: 2;
            pointer-events: none;
        }
        .social-card .social-link {
            position: relative;
            display: flex; align-items: center; justify-content: center;
            width: 25%; height: 100%;
            color: #38E1D6;
            transition: 0.25s;
            text-decoration: none;
        }
        .social-card .social-link svg { width: 19px; height: 19px; }
        .social-card .social-link:hover {
            background-color: rgba(56, 225, 214, 0.12);
            color: #ffffff;
            animation: social-bounce 0.4s linear;
        }
        @keyframes social-bounce {
            40%  { transform: scale(1.4); }
            60%  { transform: scale(0.8); }
            80%  { transform: scale(1.2); }
            100% { transform: scale(1); }
        }