:root {
  --background: #0a0a0a;
  --foreground: #ffffff;
  --color-black: #0c0c0c;
  --color-arc-blue: #FF7A00;
  --color-brand-green: #FF9900;
  --color-hot-red: #E65C00;
  --font-orbitron: 'Orbitron', sans-serif;
  --font-montserrat: 'Montserrat', sans-serif;
}

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

html {
  background: var(--background);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-montserrat), sans-serif;
}

/* Subtle light grid pattern background */
.scan-lines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: 
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}

/* Neon Glow Border Effect */
.neon-border {
  position: relative;
  border-radius: 0.75rem;
  background: rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.neon-border::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent, var(--color-arc-blue), transparent 30%);
  animation: spin 4s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.neon-border::after {
  content: "";
  position: absolute;
  inset: 1px;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}
.neon-border:hover::before {
  opacity: 0.4;
}
.neon-content {
  position: relative;
  z-index: 1;
}
@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

.glass-pill {
  background: rgba(20, 20, 20, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.navbar-glass {
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* Glitch Effect - Desktop Only */
.glitch {
  position: relative;
  color: white;
}
@media (min-width: 768px) {
  .glitch::before,
  .glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
  }
  .glitch::before {
    left: 2px;
    text-shadow: -2px 0 var(--color-hot-red);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim 5s infinite linear alternate-reverse;
  }
  .glitch::after {
    left: -2px;
    text-shadow: -2px 0 var(--color-arc-blue);
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-anim2 5s infinite linear alternate-reverse;
  }
}
@keyframes glitch-anim {
  0% { clip: rect(70px, 9999px, 75px, 0); }
  20% { clip: rect(29px, 9999px, 83px, 0); }
  40% { clip: rect(73px, 9999px, 44px, 0); }
  60% { clip: rect(65px, 9999px, 53px, 0); }
  80% { clip: rect(11px, 9999px, 93px, 0); }
  100% { clip: rect(31px, 9999px, 14px, 0); }
}
@keyframes glitch-anim2 {
  0% { clip: rect(65px, 9999px, 100px, 0); }
  20% { clip: rect(10px, 9999px, 20px, 0); }
  40% { clip: rect(80px, 9999px, 90px, 0); }
  60% { clip: rect(30px, 9999px, 40px, 0); }
  80% { clip: rect(50px, 9999px, 60px, 0); }
  100% { clip: rect(70px, 9999px, 80px, 0); }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
  background: #222;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-arc-blue);
}

/* Bridge the gap for the Services dropdown to prevent premature closing */
#services-dropdown-menu::before {
  content: '';
  position: absolute;
  top: -1.25rem;
  left: 0;
  right: 0;
  height: 1.25rem;
  background: transparent;
  z-index: 10;
}

/* ═══ CUSTOM CURSOR ═══ */
@media (hover: none) {
  #cursor-dot, #cursor-ring { display: none !important; }
}

* { cursor: none !important; }
a, button, label, select, [role="button"],
input[type="submit"], input[type="button"] { cursor: none !important; }

#cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 16px; height: 16px;
  background: var(--color-arc-blue);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.15s ease, height 0.15s ease, opacity 0.2s ease;
  will-change: left, top;
}

#cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 56px; height: 56px;
  border: 1.5px solid var(--color-arc-blue);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition:
    width 0.22s ease,
    height 0.22s ease,
    border-color 0.22s ease,
    opacity 0.2s ease;
  opacity: 0.55;
  will-change: left, top;
}

#cursor-ring.hovered {
  width: 76px; height: 76px;
  opacity: 1;
}

#cursor-dot.clicked {
  width: 22px; height: 22px;
  opacity: 0.5;
}