html { scroll-behavior: smooth; }

body { background-color: #05060a; }

#bg-grid {
  background-image:
    linear-gradient(rgba(124,92,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,92,255,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}

.nav-link {
  position: relative;
  color: #cbd5e1;
  transition: color .2s ease;
}
.nav-link:hover { color: #ffffff; }
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0%; height: 1px;
  background: linear-gradient(90deg, #7c5cff, #22d3ee);
  transition: width .25s ease;
}
.nav-link:hover::after { width: 100%; }

.tag {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: #cbd5e1;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#site-header.scrolled {
  background: rgba(5,6,10,0.75);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

::selection {
  background: rgba(124,92,255,0.35);
  color: #fff;
}

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #05060a; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7c5cff, #22d3ee);
  border-radius: 8px;
}

pre code .text-fuchsia-400 { color: #e879f9; }
pre code .text-cyan { color: #22d3ee; }
pre code .text-amber { color: #f5b942; }
pre code .text-emerald-300 { color: #6ee7b7; }
pre code .text-violet { color: #a78bfa; }
pre code .text-slate-500 { color: #64748b; }

@media (max-width: 767px) {
  .reveal { transform: translateY(16px); }
}