/* Modern Tech Background */
        body {
            background-color: #060913;
            color: #f8fafc;
            overflow-x: hidden;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        /* SVG Circuit Background */
        .circuit-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;
            background: radial-gradient(circle at center, #0a1128 0%, #060913 100%);
        }

        .circuit-track {
            fill: none;
            stroke: rgba(255, 255, 255, 0.05);
            stroke-width: 2;
        }

        .circuit-flow {
            fill: none;
            stroke-width: 3;
            stroke-linecap: round;
            filter: drop-shadow(0 0 6px currentColor);
            animation: flowAnim linear infinite, rgbAnim linear infinite;
        }

        /* The nodes (circles) scattered on the circuit */
        .node {
            fill: #060913;
            stroke-width: 2;
            animation: rgbAnim linear infinite;
            filter: drop-shadow(0 0 4px currentColor);
        }

        @keyframes flowAnim {
            0% { stroke-dashoffset: 3000; }
            100% { stroke-dashoffset: -500; }
        }

        /* Seamless RGB Transition Animation */
        @keyframes rgbAnim {
            0%   { stroke: #ff0040; color: #ff0040; }
            16%  { stroke: #ff00ff; color: #ff00ff; }
            33%  { stroke: #0000ff; color: #0000ff; }
            50%  { stroke: #00ffff; color: #00ffff; }
            66%  { stroke: #00ff00; color: #00ff00; }
            83%  { stroke: #ffff00; color: #ffff00; }
            100% { stroke: #ff0040; color: #ff0040; }
        }

        /* Animation delays and durations for background randomness */
        .f1 { animation-duration: 7s, 12s; stroke-dasharray: 150 3000; }
        .f2 { animation-duration: 5s, 15s; animation-delay: 1s, 0s; stroke-dasharray: 100 3000; }
        .f3 { animation-duration: 9s, 11s; animation-delay: 2s, 0s; stroke-dasharray: 200 3000; }
        .f4 { animation-duration: 6s, 14s; animation-delay: 0.5s, 0s; stroke-dasharray: 120 3000; }
        .f5 { animation-duration: 8s, 13s; animation-delay: 3s, 0s; stroke-dasharray: 180 3000; }
        .f6 { animation-duration: 6.5s, 10s; animation-delay: 1.5s, 0s; stroke-dasharray: 90 3000; }
        .f7 { animation-duration: 7.5s, 16s; animation-delay: 2.5s, 0s; stroke-dasharray: 160 3000; }
        .f8 { animation-duration: 5.5s, 12.5s; animation-delay: 4s, 0s; stroke-dasharray: 140 3000; }

        .n1 { animation-duration: 12s; }
        .n2 { animation-duration: 15s; animation-delay: 2s; }
        .n3 { animation-duration: 11s; animation-delay: 5s; }
        .n4 { animation-duration: 14s; animation-delay: 8s; }

        /* SYNCHRONIZED LOGO & FOOTER ANIMATIONS */
        .connector-line {
            fill: none;
            stroke-width: 3;
            stroke-linecap: round;
            stroke-dasharray: 200 2000;
            filter: drop-shadow(0 0 6px currentColor);
            animation: lineFlow 6s linear infinite, rgbAnim 6s linear infinite;
        }

        @keyframes lineFlow {
            0% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: -1200; }
        }

        .sync-text {
            position: relative;
            color: #1e293b; /* Default Off State */
        }
        
        .sync-text::before {
            content: attr(data-text);
            position: absolute;
            left: 0; top: 0;
            width: 100%; height: 100%;
            pointer-events: none;
            white-space: nowrap;
            animation: glowPulse 6s linear infinite, rgbAnim 6s linear infinite;
            z-index: 10;
        }

        .animate-glow {
            animation: glowPulse 6s linear infinite, rgbAnim 6s linear infinite;
        }

        /* The text lights up exactly when the line hits it (between 67% and 83% of the 6s cycle) */
        @keyframes glowPulse {
            0%, 65% { opacity: 0; text-shadow: none; filter: drop-shadow(0 0 0px currentColor); }
            67% { opacity: 1; text-shadow: 0 0 25px currentColor; filter: drop-shadow(0 0 10px currentColor); }
            83% { opacity: 1; text-shadow: 0 0 25px currentColor; filter: drop-shadow(0 0 10px currentColor); }
            85%, 100% { opacity: 0; text-shadow: none; filter: drop-shadow(0 0 0px currentColor); }
        }

        .footer-delay {
            animation-delay: -3s !important;
        }

        /* Glassmorphism Cards */
        .glass-card {
            background: rgba(30, 41, 59, 0.4);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    }

    /* Static Sparks */
    .spark-group {
        pointer-events: none;
        opacity: 0;
        stroke-width: 2;
        fill: none;
        filter: drop-shadow(0 0 5px currentColor);
        transform-box: fill-box;
        transform-origin: center;
    }

    .s1 { animation: sparkBurst1 3s infinite, rgbAnim 6s infinite; }
    .s2 { animation: sparkBurst2 4.5s infinite, rgbAnim 7s infinite; }
    .s3 { animation: sparkBurst3 5s infinite, rgbAnim 5s infinite; }
    .s4 { animation: sparkBurst1 3.5s infinite, rgbAnim 8s infinite; }

    @keyframes sparkBurst1 {
        0%, 90% { opacity: 0; transform: scale(0.5) rotate(0deg); }
        91%, 93%, 95% { opacity: 1; transform: scale(1.2) rotate(15deg); stroke-width: 4;}
        92%, 94% { opacity: 0.3; transform: scale(0.8) rotate(-15deg); stroke-width: 2;}
        96%, 100% { opacity: 0; transform: scale(0.5); }
    }
    @keyframes sparkBurst2 {
        0%, 85% { opacity: 0; transform: scale(0.5) rotate(0deg); }
        86%, 88%, 90% { opacity: 1; transform: scale(1.5) rotate(-20deg); stroke-width: 3;}
        87%, 89% { opacity: 0.2; transform: scale(0.9) rotate(20deg); stroke-width: 1;}
        91%, 100% { opacity: 0; transform: scale(0.5); }
    }
    @keyframes sparkBurst3 {
        0%, 94% { opacity: 0; transform: scale(0.5) rotate(0deg); }
        95%, 97%, 99% { opacity: 1; transform: scale(1.3) rotate(45deg); stroke-width: 3;}
        96%, 98% { opacity: 0.4; transform: scale(0.7) rotate(-45deg); stroke-width: 5;}
        100% { opacity: 0; transform: scale(0.5); }
    }

    /* From Uiverse.io by xXJollyHAKERXx */ 
    .spinner {
      background-image: linear-gradient(rgb(186, 66, 255) 35%,rgb(0, 225, 255));
      width: 100px;
      height: 100px;
      animation: spinning82341 1.7s linear infinite;
      text-align: center;
      border-radius: 50px;
      filter: blur(1px);
      box-shadow: 0px -5px 20px 0px rgb(186, 66, 255), 0px 5px 20px 0px rgb(0, 225, 255);
    }

    .spinner1 {
      background-color: rgb(36, 36, 36);
      width: 100px;
      height: 100px;
      border-radius: 50px;
      filter: blur(10px);
    }

    @keyframes spinning82341 {
      to {
        transform: rotate(360deg);
      }
    }