/* === CYBERPUNK STYLE — 0038 === */
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root {
  --neon-purple: #b400ff;
  --neon-cyan: #0066ff;
  --dark-bg: #0a0a0a;
  --darker-bg: #080808;
  --panel-bg: #111111;
  --text-dim: #666666;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Share Tech Mono', 'Courier New', monospace;
  background-color: var(--dark-bg);
  color: #e5e5e5;
}

/* Glitch effect */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.8;
}

.glitch::before {
  color: #0ff;
  z-index: -1;
  animation: glitch-1 0.3s infinite;
  clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
}

.glitch::after {
  color: #f0f;
  z-index: -2;
  animation: glitch-2 0.3s infinite;
  clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
}

@keyframes glitch-1 {
  0%, 100% { transform: translate(0); }
  33% { transform: translate(-2px, 1px); }
  66% { transform: translate(2px, -1px); }
}

@keyframes glitch-2 {
  0%, 100% { transform: translate(0); }
  33% { transform: translate(2px, -1px); }
  66% { transform: translate(-2px, 1px); }
}

/* Glitch text for navbar */
.glitch-text {
  position: relative;
}
.glitch-text:hover {
  animation: glitch-text-anim 0.5s ease;
}
@keyframes glitch-text-anim {
  0%, 100% { text-shadow: 2px 2px var(--neon-purple), -2px -2px var(--neon-cyan); }
  25% { text-shadow: -2px -2px var(--neon-purple), 2px 2px var(--neon-cyan); }
  50% { text-shadow: 2px -2px var(--neon-purple), -2px 2px var(--neon-cyan); }
  75% { text-shadow: -2px 2px var(--neon-purple), 2px -2px var(--neon-cyan); }
}

/* Scan line animation overlay */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* Neon glow utilities */
.neon-glow-purple {
  box-shadow: 0 0 15px rgba(180, 0, 255, 0.3), 0 0 30px rgba(180, 0, 255, 0.1);
}

.neon-glow-cyan {
  box-shadow: 0 0 15px rgba(0, 102, 255, 0.3), 0 0 30px rgba(0, 102, 255, 0.1);
}

/* Neon border animation */
@keyframes neon-pulse {
  0%, 100% { border-color: rgba(180, 0, 255, 0.5); box-shadow: 0 0 10px rgba(180, 0, 255, 0.1); }
  50% { border-color: rgba(180, 0, 255, 0.8); box-shadow: 0 0 20px rgba(180, 0, 255, 0.2); }
}

.neon-border-anim {
  animation: neon-pulse 3s ease-in-out infinite;
}

/* FAQ */
.faq-btn .fa-chevron-down {
  transition: transform 0.3s ease;
}
.faq-btn.active .fa-chevron-down {
  transform: rotate(180deg);
}
.faq-btn.active {
  color: #d4a0ff;
}

/* Mobile menu */
#mobile-menu { transition: all 0.3s ease; }
#mobile-menu.show { display: block; }

/* Counter */
.counter { font-variant-numeric: tabular-nums; }

/* Form fields */
input:focus, textarea:focus {
  border-color: var(--neon-purple) !important;
  box-shadow: 0 0 10px rgba(180, 0, 255, 0.2) !important;
}

/* Terminal cursor */
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* Selection */
::selection {
  background: rgba(180, 0, 255, 0.3);
  color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: #b400ff; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #d44aff; }

@media (max-width: 768px) {
  h1 { font-size: 2.5rem !important; }
  h2 { font-size: 2rem !important; }
}

/* Matrix canvas */
#matrix-bg, #cta-particles {
  display: block;
}