<section class="nn-btn" aria-label="Neon buttons demo">
  <div class="stage">
    <button class="btn btn-trace" type="button">
      <svg class="tracer" viewBox="0 0 220 54" preserveAspectRatio="none" aria-hidden="true">
        <rect x="1" y="1" width="218" height="52" rx="0"/>
      </svg>
      <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
      ACTIVATE
    </button>

    <button class="btn btn-pulse" type="button">
      <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 1v4M12 19v4M4.22 4.22l2.83 2.83M16.95 16.95l2.83 2.83M1 12h4M19 12h4M4.22 19.78l2.83-2.83M16.95 7.05l2.83-2.83"/></svg>
      IGNITE
    </button>

    <button class="btn btn-solid" type="button">
      <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
      EXECUTE
    </button>

    <button class="btn btn-ghost" type="button">
      <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true" style="fill:none;stroke:currentColor;stroke-width:2"><path d="M22 12h-4l-3 9L9 3l-3 9H2"/></svg>
      CONNECT
    </button>

    <button class="btn btn-double" type="button">
      <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
      SECURE
    </button>

    <button class="btn btn-sweep" type="button">
      <svg class="btn-icon" viewBox="0 0 24 24" aria-hidden="true" style="fill:none;stroke:currentColor;stroke-width:2"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
      LAUNCH
    </button>
  </div>
</section>

/* ─── 01 Neon Buttons — six glow treatments on dark grid ───────── */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Orbitron:wght@400;700;900&display=swap');

.nn-btn {
  position: relative;
  width: 100%;
  min-height: 560px;
  background: #04040f;
  font-family: 'Rajdhani', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  overflow: hidden;
  box-sizing: border-box;
}

.nn-btn *,
.nn-btn *::before,
.nn-btn *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Dark grid backdrop — was body::before; scoped to wrapper. */
.nn-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0,255,200,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,255,200,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

.nn-btn .stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 36px 48px;
  align-items: center;
  justify-items: center;
  padding: 24px;
}

.nn-btn .btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 44px;
  font-family: 'Orbitron', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border: none;
  outline: none;
  overflow: hidden;
  transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

.nn-btn .btn-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

/* 1 — BORDER TRACE CYAN */
.nn-btn .btn-trace { color: #00ffe5; background: transparent; }
.nn-btn .btn-trace::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.5px solid rgba(0,255,229,0.25);
}
.nn-btn .btn-trace svg.tracer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.nn-btn .btn-trace svg.tracer rect {
  fill: none;
  stroke: #00ffe5;
  stroke-width: 2;
  stroke-dasharray: 0 9999;
  transition: stroke-dasharray 0s;
  filter: drop-shadow(0 0 6px #00ffe5) drop-shadow(0 0 14px #00ffe5);
}
.nn-btn .btn-trace:hover svg.tracer rect {
  stroke-dasharray: 9999 0;
  transition: stroke-dasharray 0.65s ease;
}
.nn-btn .btn-trace:hover {
  color: #fff;
  text-shadow: 0 0 12px #00ffe5, 0 0 28px #00ffe5;
  background: rgba(0,255,229,0.05);
  box-shadow: inset 0 0 20px rgba(0,255,229,0.07);
}

/* 2 — PULSE GLOW PINK */
.nn-btn .btn-pulse {
  color: #ff2d78;
  background: rgba(255,45,120,0.08);
  border: 1.5px solid #ff2d78;
  text-shadow: 0 0 8px rgba(255,45,120,0.8);
  box-shadow:
    0 0 12px rgba(255,45,120,0.4),
    inset 0 0 12px rgba(255,45,120,0.08);
  animation: nn-btn-pulse 2.2s ease-in-out infinite;
}
@keyframes nn-btn-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,45,120,0.35), 0 0 30px rgba(255,45,120,0.15), inset 0 0 12px rgba(255,45,120,0.07); }
  50%      { box-shadow: 0 0 22px rgba(255,45,120,0.7),  0 0 55px rgba(255,45,120,0.3),  inset 0 0 20px rgba(255,45,120,0.12); }
}
.nn-btn .btn-pulse:hover {
  background: rgba(255,45,120,0.18);
  color: #fff;
  text-shadow: 0 0 6px #fff, 0 0 18px #ff2d78;
  box-shadow:
    0 0 28px rgba(255,45,120,0.8),
    0 0 70px rgba(255,45,120,0.4),
    inset 0 0 28px rgba(255,45,120,0.15);
  animation: none;
  transform: scale(1.04);
}

/* 3 — SOLID FILLED VIOLET */
.nn-btn .btn-solid {
  color: #0d0020;
  background: linear-gradient(135deg, #bf5fff, #7b00ff);
  box-shadow:
    0 0 20px rgba(127,0,255,0.6),
    0 0 50px rgba(127,0,255,0.25),
    inset 0 1px 0 rgba(255,255,255,0.15);
  clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}
.nn-btn .btn-solid::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 60%);
  pointer-events: none;
}
.nn-btn .btn-solid:hover {
  background: linear-gradient(135deg, #d47fff, #9b2fff);
  box-shadow:
    0 0 35px rgba(127,0,255,0.9),
    0 0 90px rgba(127,0,255,0.45),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

/* 4 — GHOST + SCANLINE AMBER */
.nn-btn .btn-ghost {
  color: #ffb700;
  background: transparent;
  border: 2px solid #ffb700;
  text-shadow: 0 0 10px rgba(255,183,0,0.9);
  box-shadow: 0 0 16px rgba(255,183,0,0.3), inset 0 0 16px rgba(255,183,0,0.05);
  overflow: hidden;
}
.nn-btn .btn-ghost::before {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(255,183,0,0.18), transparent);
  transform: skewY(-4deg);
  transition: top 0s;
}
.nn-btn .btn-ghost:hover::before {
  top: 200%;
  transition: top 0.5s ease;
}
.nn-btn .btn-ghost:hover {
  background: rgba(255,183,0,0.1);
  box-shadow:
    0 0 28px rgba(255,183,0,0.65),
    0 0 60px rgba(255,183,0,0.3),
    inset 0 0 22px rgba(255,183,0,0.12);
  color: #fff;
  text-shadow: 0 0 6px #ffb700, 0 0 20px #ffb700;
}

/* 5 — DOUBLE BORDER TEAL */
.nn-btn .btn-double {
  color: #00ffcc;
  background: transparent;
  padding: 14px 40px;
  outline: 1px solid rgba(0,255,204,0.2);
  outline-offset: 5px;
  border: 1.5px solid #00ffcc;
  text-shadow: 0 0 8px #00ffcc;
  box-shadow: 0 0 14px rgba(0,255,204,0.3), inset 0 0 14px rgba(0,255,204,0.05);
  transition: all 0.3s ease;
}
.nn-btn .btn-double:hover {
  outline-offset: 2px;
  outline-color: rgba(0,255,204,0.7);
  box-shadow:
    0 0 28px rgba(0,255,204,0.6),
    0 0 70px rgba(0,255,204,0.25),
    inset 0 0 24px rgba(0,255,204,0.1);
  color: #fff;
  text-shadow: 0 0 4px #fff, 0 0 16px #00ffcc;
  background: rgba(0,255,204,0.07);
}

/* 6 — FILL SWEEP RED */
.nn-btn .btn-sweep {
  color: #ff3c3c;
  background: transparent;
  border: 1.5px solid #ff3c3c;
  text-shadow: 0 0 8px rgba(255,60,60,0.8);
  overflow: hidden;
  z-index: 0;
}
.nn-btn .btn-sweep::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #ff3c3c, #ff0066);
  transform: translateX(-105%);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  z-index: -1;
}
.nn-btn .btn-sweep:hover::before { transform: translateX(0); }
.nn-btn .btn-sweep:hover {
  color: #000;
  text-shadow: none;
  border-color: transparent;
  box-shadow: 0 0 30px rgba(255,60,60,0.7), 0 0 70px rgba(255,60,60,0.3);
  letter-spacing: 0.22em;
}

@media (max-width: 640px) {
  .nn-btn .stage { grid-template-columns: 1fr; gap: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .nn-btn .btn,
  .nn-btn .btn-pulse,
  .nn-btn .btn-ghost::before,
  .nn-btn .btn-sweep::before,
  .nn-btn .btn-trace svg.tracer rect { animation: none !important; transition: none !important; }
}