/* Custom Styles */
 .cc-btn {
     width: 165px;
     height: 62px;
     cursor: pointer;
     color: #fff;
     font-size: 17px;
     border-radius: 1rem;
     border: none;
     position: relative;
     background: #100720;
     transition: 0.1s;
   }
   
   .cc-btn::after {
     content: '';
     width: 100%;
     height: 100%;
     background-image: radial-gradient( circle farthest-corner at 10% 20%,  rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );
     filter: blur(15px);
     z-index: -1;
     position: absolute;
     left: 0;
     top: 0;
   }
   
   .cc-btn:active {
     transform: scale(0.9) rotate(3deg);
     background: radial-gradient( circle farthest-corner at 10% 20%,  rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% );
     transition: 0.5s;
   }
 body {
     font-family: 'Inter', sans-serif;
     background-color: #111827;
     background: linear-gradient(145deg, #0d0d1a, #1a1a3d);
     color: #E5E7EB;
 }
 /* Glassmorphism effect */
 .glassmorphism {
     background: rgba(31, 41, 55, 0.25);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.1);
 }
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
 }
 ::-webkit-scrollbar-track {
     background: #111827;
 }
 ::-webkit-scrollbar-thumb {
     background: #4A5568;
     border-radius: 10px;
 }
 ::-webkit-scrollbar-thumb:hover {
     background: #718096;
 }
 
 /* Active Nav Link Style */
 .nav-link.active {
     color: #818cf8; /* Indigo-400 */
     font-weight: 600;
 }
 /* Canvas for background animation */
 #background-canvas {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: -1;
     opacity: 1;
 }
 /* Scroll Animation */
 .scroll-animate {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.6s ease-out, transform 0.6s ease-out;
 }
 .scroll-animate.animated {
     opacity: 1;
     transform: translateY(0);
 }
 .bg-blur {
     background: rgba(255, 255, 255, 0.2); 
     backdrop-filter: blur(3px);
 }
 /* Hide scrollbar but keep scroll functionality */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .swal2-container {
      background-color: rgb(255 255 255 / 40%) !important;
    }

    .swal2-modal {
      background-color: #13111c !important;
    }

    .swal2-title, .swal2-html-container  {
      color: #fff !important;
      text-align: center !important;
    }
    
    .swal2-confirm, .swal2-styled {
        background: radial-gradient( circle farthest-corner at 10% 20%,  rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2% ) !important;
    }

    /* Spinner Animation */
    .gradient-loader {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: radial-gradient(circle farthest-corner at 10% 20%, rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2%);
      mask: 
        radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 6px));
      -webkit-mask: 
        radial-gradient(farthest-side, transparent calc(100% - 6px), black calc(100% - 6px));
      animation: spin 1s linear infinite;
    }

    @keyframes spin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .btn-grad {
        background: radial-gradient(circle farthest-corner at 10% 20%, rgba(255,94,247,1) 17.8%, rgba(2,245,255,1) 100.2%);
    }

/* Preloader styles */
.preloader {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: #020617;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Inherit your styles for the logo, svg, and animations */
body.preloader-active {
  overflow: hidden;
}
.logo-wrap {
  width: 500px;
  max-width: 90vw;
  display: block;
  position: relative;
}
.logo {
  transform-origin: center center;
  animation: logo-breathe 3.5s ease-in-out infinite;
}
@keyframes logo-breathe {
  0% { transform: scale(1); }
  50% { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.pre-svg { width: 100%; height: 100%; display: block; }

.dp-text {
  fill: none;
  stroke: url(#grad);
  stroke-width: 18;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 12px var(--accent2));
}
.dp-fill {
  fill: url(#grad);
  opacity: 0.22;
}
.circuit {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 8 40;
  animation: dash 2s linear infinite;
}
@keyframes dash { to { stroke-dashoffset: -48; } }

.binary-text {
  font-family: monospace;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2px;
  fill: var(--accent2);
  opacity: 0.85;
}
.dev-code {
  font-family: monospace;
  font-size: 13px;
  font-weight: 600;
}
.tag { fill: var(--tag); }
.bracket { fill: var(--bracket); }
.attr { fill: var(--code); }

/* Color variables */
:root {
  --bg: #020617;
  --accent: #00e6a8;
  --accent2: #64c8ff;
  --code: #ffcb6b;
  --tag: #c792ea;
  --bracket: #82aaff;
}