:root {
  --mh-neon-cyan: #00ffff;
  --mh-neon-magenta: #ff00ff;
  --mh-neon-lime: #00ff88;
  --mh-neon-orange: #ff6600;
  --mh-neon-purple: #bf00ff;
  --mh-bg-deep: #070812;
  --mh-bg-surface: #0d0f1a;
  --mh-bg-elevated: #141627;
  --mh-bg-panel: rgba(20, 22, 39, 0.85);
  --mh-text-primary: #f0f0f5;
  --mh-text-secondary: #a0a0b0;
  --mh-text-muted: #606070;
  --mh-legal-bg: #1a1a1f;
  --mh-legal-paper: #d7d0c6;
  --mh-legal-text: #1a1a1a;
  --mh-legal-text-muted: #4a4a4a;
  --mh-font-display: 'Oxanium', 'Orbitron', system-ui, sans-serif;
  --mh-font-mono: 'Space Mono', 'JetBrains Mono', 'Fira Code', monospace;
  --mh-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --mh-glow-cyan: 0 0 20px rgba(0, 255, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.2);
  --mh-glow-magenta: 0 0 20px rgba(255, 0, 255, 0.5), 0 0 40px rgba(255, 0, 255, 0.2);
  --mh-glow-text-cyan: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.4);
}

[data-marketing-theme="cyberpunk"] {
  background: var(--mh-bg-deep);
  color: var(--mh-text-primary);
}

[data-marketing-theme="cyberpunk"] .bg-white {
  background: var(--mh-bg-surface) !important;
}

[data-marketing-theme="cyberpunk"] .bg-gray-50 {
  background: var(--mh-bg-elevated) !important;
}

[data-marketing-theme="cyberpunk"] .bg-gray-900 {
  background: var(--mh-bg-deep) !important;
}

[data-marketing-theme="cyberpunk"] .text-gray-900 {
  color: var(--mh-text-primary) !important;
}

[data-marketing-theme="cyberpunk"] .text-gray-600,
[data-marketing-theme="cyberpunk"] .text-gray-700 {
  color: var(--mh-text-secondary) !important;
}

[data-marketing-theme="cyberpunk"] .text-gray-400,
[data-marketing-theme="cyberpunk"] .text-gray-500 {
  color: var(--mh-text-muted) !important;
}

[data-marketing-theme="cyberpunk"] .text-gray-300 {
  color: var(--mh-text-secondary) !important;
}

[data-marketing-theme="cyberpunk"] .text-indigo-600,
[data-marketing-theme="cyberpunk"] .text-indigo-500 {
  color: var(--mh-neon-cyan) !important;
}

[data-marketing-theme="cyberpunk"] .text-indigo-200 {
  color: rgba(0, 255, 255, 0.6) !important;
}

[data-marketing-theme="cyberpunk"] .hover\:text-indigo-600:hover,
[data-marketing-theme="cyberpunk"] .hover\:text-indigo-500:hover {
  color: var(--mh-neon-magenta) !important;
}

[data-marketing-theme="cyberpunk"] .bg-indigo-600,
[data-marketing-theme="cyberpunk"] .bg-indigo-500 {
  background: linear-gradient(135deg, var(--mh-neon-cyan), var(--mh-neon-purple)) !important;
  box-shadow: var(--mh-glow-cyan);
}

[data-marketing-theme="cyberpunk"] .hover\:bg-indigo-500:hover,
[data-marketing-theme="cyberpunk"] .hover\:bg-indigo-400:hover {
  background: linear-gradient(135deg, var(--mh-neon-magenta), var(--mh-neon-cyan)) !important;
  box-shadow: var(--mh-glow-magenta);
}

[data-marketing-theme="cyberpunk"] .from-indigo-200 {
  --tw-gradient-from: rgba(0, 255, 255, 0.3) !important;
}

[data-marketing-theme="cyberpunk"] .to-indigo-400 {
  --tw-gradient-to: rgba(191, 0, 255, 0.3) !important;
}

[data-marketing-theme="cyberpunk"] .from-indigo-100\/20 {
  --tw-gradient-from: rgba(0, 255, 255, 0.1) !important;
}

[data-marketing-theme="cyberpunk"] .border-gray-200 {
  border-color: rgba(0, 255, 255, 0.2) !important;
}

[data-marketing-theme="cyberpunk"] .ring-gray-200 {
  --tw-ring-color: rgba(0, 255, 255, 0.2) !important;
}

[data-marketing-theme="cyberpunk"] .divide-gray-500\/10 > :not([hidden]) ~ :not([hidden]),
[data-marketing-theme="cyberpunk"] .divide-gray-900\/10 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgba(0, 255, 255, 0.15) !important;
}

[data-marketing-theme="cyberpunk"] .border-white\/10 {
  border-color: rgba(0, 255, 255, 0.15) !important;
}

[data-marketing-theme="cyberpunk"] .shadow-sm {
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.15) !important;
}

[data-marketing-theme="cyberpunk"] .shadow-md {
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.2) !important;
}

[data-marketing-theme="cyberpunk"] .shadow-2xl {
  box-shadow: 0 0 50px rgba(0, 255, 255, 0.3), 0 0 100px rgba(191, 0, 255, 0.2) !important;
}

[data-marketing-theme="cyberpunk"] .hover\:shadow-md:hover {
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.4), 0 0 60px rgba(191, 0, 255, 0.2) !important;
}

[data-marketing-theme="cyberpunk"] .hover\:bg-gray-50:hover,
[data-marketing-theme="cyberpunk"] .hover\:bg-gray-100:hover {
  background: var(--mh-bg-elevated) !important;
}

[data-marketing-theme="cyberpunk"] .focus-visible\:outline-indigo-600:focus-visible,
[data-marketing-theme="cyberpunk"] .focus-visible\:outline-indigo-500:focus-visible,
[data-marketing-theme="cyberpunk"] .focus-visible\:outline-white:focus-visible {
  outline-color: var(--mh-neon-cyan) !important;
  box-shadow: var(--mh-glow-cyan);
}

.mh-wordmark {
  font-family: var(--mh-font-display);
  letter-spacing: 0.02em;
}

[data-marketing-theme="cyberpunk"] .mh-wordmark {
  color: var(--mh-neon-cyan) !important;
  text-shadow: var(--mh-glow-text-cyan);
}

[data-marketing-theme="legal"] .mh-wordmark {
  color: var(--mh-text-primary) !important;
}

[data-marketing-theme="cyberpunk"] header svg.text-indigo-600,
[data-marketing-theme="cyberpunk"] header svg.text-indigo-500,
[data-marketing-theme="cyberpunk"] footer svg.text-indigo-500 {
  color: var(--mh-neon-cyan) !important;
  filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6));
}

.mh-bg-grid,
.mh-bg-scanlines,
.mh-bg-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.mh-bg-grid {
  background-image: 
    linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(0, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
  opacity: 0.8;
}

[data-marketing-theme="cyberpunk"] .relative.isolate::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: 
    linear-gradient(transparent, var(--mh-bg-deep)),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 49px,
      rgba(0, 255, 255, 0.1) 49px,
      rgba(0, 255, 255, 0.1) 50px
    );
  background-size: 100% 100%, 50px 100%;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: bottom;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
}

.mh-bg-scanlines {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  opacity: 0.4;
}

.mh-bg-scanlines::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 255, 0.3),
    transparent
  );
  animation: mh-scanline-sweep 8s linear infinite;
}

@keyframes mh-scanline-sweep {
  0% { top: 0%; }
  100% { top: 100%; }
}

.mh-bg-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.02;
}

@media (prefers-reduced-motion: reduce) {
  .mh-bg-scanlines::after {
    animation: none !important;
    display: none;
  }
  
  [data-marketing-theme="cyberpunk"] * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

[data-marketing-theme="cyberpunk"] .rounded-2xl.border {
  background: var(--mh-bg-panel) !important;
  backdrop-filter: blur(10px);
  border-color: rgba(0, 255, 255, 0.15) !important;
  transition: all 0.3s ease;
}

[data-marketing-theme="cyberpunk"] .rounded-2xl.border:hover {
  border-color: rgba(0, 255, 255, 0.4) !important;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.2), inset 0 0 20px rgba(0, 255, 255, 0.05);
  transform: translateY(-2px);
}

[data-marketing-theme="cyberpunk"] .rounded-3xl {
  background: var(--mh-bg-panel) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.15) !important;
}

[data-marketing-theme="cyberpunk"] .rounded-3xl.relative.bg-gray-900 {
  background: linear-gradient(135deg, var(--mh-bg-elevated), var(--mh-bg-deep)) !important;
  border: 2px solid var(--mh-neon-cyan) !important;
  box-shadow: 0 0 40px rgba(0, 255, 255, 0.3), 0 0 80px rgba(191, 0, 255, 0.15);
}

[data-marketing-theme="cyberpunk"] .rounded-full.bg-indigo-600 {
  background: linear-gradient(90deg, var(--mh-neon-cyan), var(--mh-neon-magenta)) !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
  animation: mh-badge-pulse 2s ease-in-out infinite;
}

@keyframes mh-badge-pulse {
  0%, 100% { box-shadow: 0 0 15px rgba(0, 255, 255, 0.5); }
  50% { box-shadow: 0 0 25px rgba(0, 255, 255, 0.8), 0 0 40px rgba(255, 0, 255, 0.4); }
}

[data-marketing-theme="cyberpunk"] .rounded-lg.bg-indigo-600 {
  background: linear-gradient(135deg, var(--mh-neon-cyan), var(--mh-neon-purple)) !important;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

[data-marketing-theme="cyberpunk"] pre.bg-gray-900,
[data-marketing-theme="cyberpunk"] .bg-gray-900 pre,
[data-marketing-theme="cyberpunk"] .rounded-lg.bg-gray-900 {
  background: var(--mh-bg-deep) !important;
  border: 1px solid rgba(0, 255, 255, 0.2);
  box-shadow: inset 0 0 30px rgba(0, 255, 255, 0.05);
}

[data-marketing-theme="cyberpunk"] pre code,
[data-marketing-theme="cyberpunk"] .text-gray-300 code {
  font-family: var(--mh-font-mono);
  color: var(--mh-neon-lime) !important;
}

[data-marketing-theme="cyberpunk"] a.rounded-md.bg-indigo-600,
[data-marketing-theme="cyberpunk"] a.rounded-md.bg-indigo-500,
[data-marketing-theme="cyberpunk"] button.rounded-md.bg-indigo-600 {
  background: transparent !important;
  border: 2px solid var(--mh-neon-cyan) !important;
  color: var(--mh-neon-cyan) !important;
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.3), inset 0 0 15px rgba(0, 255, 255, 0.1);
  transition: all 0.3s ease;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

[data-marketing-theme="cyberpunk"] a.rounded-md.bg-indigo-600:hover,
[data-marketing-theme="cyberpunk"] a.rounded-md.bg-indigo-500:hover,
[data-marketing-theme="cyberpunk"] button.rounded-md.bg-indigo-600:hover {
  background: var(--mh-neon-cyan) !important;
  color: var(--mh-bg-deep) !important;
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.6), 0 0 60px rgba(0, 255, 255, 0.3);
  text-shadow: none;
}

[data-marketing-theme="cyberpunk"] a.rounded-md.bg-white {
  background: transparent !important;
  border: 2px solid var(--mh-neon-magenta) !important;
  color: var(--mh-neon-magenta) !important;
  box-shadow: 0 0 15px rgba(255, 0, 255, 0.3), inset 0 0 15px rgba(255, 0, 255, 0.1);
  transition: all 0.3s ease;
}

[data-marketing-theme="cyberpunk"] a.rounded-md.bg-white:hover {
  background: var(--mh-neon-magenta) !important;
  color: var(--mh-bg-deep) !important;
  box-shadow: 0 0 30px rgba(255, 0, 255, 0.6), 0 0 60px rgba(255, 0, 255, 0.3);
}

[data-marketing-theme="cyberpunk"] .fixed.inset-y-0.right-0.bg-white {
  background: var(--mh-bg-surface) !important;
  border-left: 1px solid rgba(0, 255, 255, 0.2);
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5), -5px 0 20px rgba(0, 255, 255, 0.1);
}

[data-marketing-theme="cyberpunk"] .absolute.right-0.bg-white {
  background: var(--mh-bg-elevated) !important;
  border: 1px solid rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 255, 255, 0.1);
}

[data-marketing-theme="cyberpunk"] svg.text-indigo-600[viewBox="0 0 20 20"] {
  color: var(--mh-neon-lime) !important;
  filter: drop-shadow(0 0 4px rgba(0, 255, 136, 0.6));
}

[data-marketing-theme="cyberpunk"] header {
  background: rgba(7, 8, 18, 0.8);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 255, 255, 0.1);
}

[data-marketing-theme="cyberpunk"] footer {
  background: var(--mh-bg-deep) !important;
  border-top: 1px solid rgba(0, 255, 255, 0.1);
  position: relative;
  z-index: 10;
}

[data-marketing-theme="cyberpunk"] footer a:hover {
  color: var(--mh-neon-cyan) !important;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

[data-marketing-theme="cyberpunk"] h1,
[data-marketing-theme="cyberpunk"] h2,
[data-marketing-theme="cyberpunk"] h3 {
  font-family: var(--mh-font-display);
}

[data-marketing-theme="cyberpunk"] h1 {
  text-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
}

[data-marketing-theme="cyberpunk"] .text-base.font-semibold.leading-7.text-indigo-600 {
  font-family: var(--mh-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

[data-marketing-theme="legal"] {
  background: var(--mh-legal-bg);
  color: var(--mh-text-primary);
}

[data-marketing-theme="legal"] header {
  background: rgba(26, 26, 31, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-marketing-theme="legal"] header .text-gray-900,
[data-marketing-theme="legal"] header .text-gray-700 {
  color: var(--mh-text-primary) !important;
}

[data-marketing-theme="legal"] header svg.text-indigo-600 {
  color: var(--mh-text-primary) !important;
}

[data-marketing-theme="legal"] footer {
  background: var(--mh-bg-deep) !important;
}

[data-marketing-theme="legal"] .bg-white {
  background: transparent !important;
}

[data-marketing-theme="legal"] .bg-white > .mx-auto {
  background: var(--mh-legal-paper);
  color: var(--mh-legal-text);
  border-radius: 8px;
  box-shadow: 
    0 4px 6px rgba(0, 0, 0, 0.3),
    0 10px 40px rgba(0, 0, 0, 0.4);
  padding: 3rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

[data-marketing-theme="legal"] .bg-white .text-gray-900 {
  color: var(--mh-legal-text) !important;
}

[data-marketing-theme="legal"] .bg-white .text-gray-500 {
  color: var(--mh-legal-text-muted) !important;
}

[data-marketing-theme="legal"] .prose {
  --tw-prose-body: var(--mh-legal-text);
  --tw-prose-headings: var(--mh-legal-text);
  --tw-prose-links: #0066cc;
  --tw-prose-bold: var(--mh-legal-text);
  --tw-prose-bullets: var(--mh-legal-text-muted);
  --tw-prose-counters: var(--mh-legal-text-muted);
}

[data-marketing-theme="legal"] .prose h2 {
  color: var(--mh-legal-text);
  font-family: var(--mh-font-body);
}

[data-marketing-theme="legal"] .prose a {
  color: #0066cc;
  text-decoration: underline;
}

[data-marketing-theme="legal"] .prose a:hover {
  color: #0044aa;
}

[data-marketing-theme="legal"] .fixed.inset-y-0.right-0.bg-white {
  background: var(--mh-legal-paper) !important;
}

[data-marketing-theme="legal"] .fixed.inset-y-0 .text-gray-900 {
  color: var(--mh-legal-text) !important;
}

[data-marketing-theme="legal"] .fixed.inset-y-0 .hover\:bg-gray-50:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

[data-marketing-theme="legal"] a.rounded-md.bg-indigo-600 {
  background: #333 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

[data-marketing-theme="legal"] a.rounded-md.bg-indigo-600:hover {
  background: #444 !important;
}

/* Docs tabs styling */
.mh-tab {
  border-color: transparent;
  color: #6b7280;
  transition: all 0.2s ease;
}

.mh-tab:hover {
  border-color: #d1d5db;
  color: #374151;
}

.mh-tab.mh-tab-active,
.mh-tab[aria-selected="true"] {
  border-color: #4f46e5;
  color: #4f46e5;
}

[data-marketing-theme="cyberpunk"] .mh-tab {
  border-color: transparent;
  color: var(--mh-text-muted);
}

[data-marketing-theme="cyberpunk"] .mh-tab:hover {
  border-color: rgba(0, 255, 255, 0.5);
  color: var(--mh-text-secondary);
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

[data-marketing-theme="cyberpunk"] .mh-tab.mh-tab-active,
[data-marketing-theme="cyberpunk"] .mh-tab[aria-selected="true"] {
  border-color: var(--mh-neon-cyan);
  color: var(--mh-neon-cyan);
  text-shadow: var(--mh-glow-text-cyan);
}

/* Prose styling for docs content */
[data-marketing-theme="cyberpunk"] .prose {
  --tw-prose-body: var(--mh-text-secondary);
  --tw-prose-headings: var(--mh-text-primary);
  --tw-prose-links: var(--mh-neon-cyan);
  --tw-prose-bold: var(--mh-text-primary);
  --tw-prose-code: var(--mh-neon-lime);
  --tw-prose-pre-bg: var(--mh-bg-deep);
  --tw-prose-bullets: var(--mh-neon-cyan);
  --tw-prose-counters: var(--mh-neon-cyan);
}

[data-marketing-theme="cyberpunk"] .prose h2,
[data-marketing-theme="cyberpunk"] .prose h3 {
  font-family: var(--mh-font-display);
  color: var(--mh-text-primary);
}

[data-marketing-theme="cyberpunk"] .prose a {
  color: var(--mh-neon-cyan);
  text-decoration: none;
}

[data-marketing-theme="cyberpunk"] .prose a:hover {
  text-shadow: var(--mh-glow-text-cyan);
}

[data-marketing-theme="cyberpunk"] .prose code {
  font-family: var(--mh-font-mono);
  color: var(--mh-neon-lime);
  background: var(--mh-bg-deep);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}

[data-marketing-theme="cyberpunk"] .prose pre {
  background: var(--mh-bg-deep);
  border: 1px solid rgba(0, 255, 255, 0.2);
  box-shadow: inset 0 0 20px rgba(0, 255, 255, 0.05);
}

[data-marketing-theme="cyberpunk"] .prose pre code {
  background: transparent;
  padding: 0;
}

[data-marketing-theme="cyberpunk"] .prose ol > li::marker,
[data-marketing-theme="cyberpunk"] .prose ul > li::marker {
  color: var(--mh-neon-cyan);
}

/* Guide cards in docs */
[data-marketing-theme="cyberpunk"] .bg-indigo-50 {
  background: rgba(0, 255, 255, 0.1) !important;
}

[data-marketing-theme="cyberpunk"] .text-indigo-700 {
  color: var(--mh-neon-cyan) !important;
}