/* MHQ product page: the shared site system in MHQ blue (replaces the old blue to violet gradient). */
body.mhq { --accent: #38BDF8; --accent2: #38BDF8; --accent-soft: #7DD3FC; --grad: linear-gradient(135deg, #38BDF8, #38BDF8); }
.mhq .btn-primary { background: #38BDF8; color: #0B0F14; box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -8px rgba(56,189,248,.5); }
.mhq .hero h1 em { background: none; -webkit-text-fill-color: #38BDF8; color: #38BDF8; }
.mhq .final-cta { background: radial-gradient(46% 60% at 50% 0%, rgba(56,189,248,.14), transparent 72%); }

/* Page background: a dark blue gradient with the MHQ bars, very faint, fixed behind every section.
   The bars rise in on load, then the blue bar slowly pulses and the mark drifts. */
body.mhq {
  background-color: var(--bg);
  background-image: linear-gradient(135deg, #0A1E2C 0%, #0A1520 35%, #0A1018 70%, #07090d 100%);
  background-attachment: fixed;
}
.mhq .section-alt { background: rgba(255,255,255,.012); }
.mhq-bars {
  position: fixed; z-index: -1; right: 4vw; top: 50%; transform: translateY(-50%);
  height: 86vh; width: auto; pointer-events: none;
  animation: mhqDrift 14s ease-in-out 2s infinite;
}
.mhq-bars polygon { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: mhqBarIn 1.3s cubic-bezier(.2,.8,.2,1) forwards; }
.mhq-bars .b1 { animation-delay: .15s; }
.mhq-bars .b2 { animation-delay: .4s; }
.mhq-bars .b3 { animation: mhqBarIn 1.3s cubic-bezier(.2,.8,.2,1) .65s forwards, mhqPulse 6s ease-in-out 2.4s infinite; }
@keyframes mhqBarIn { from { opacity: 0; transform: translateY(14%) scaleY(.92); } to { opacity: 1; transform: none; } }
@keyframes mhqPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes mhqDrift { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 10px)); } }
@media (max-width: 760px) {
  .mhq-bars { right: -30vw; top: 62%; height: 70vh; }
}
@media (prefers-reduced-motion: reduce) {
  .mhq-bars, .mhq-bars polygon, .mhq-bars .b3 { animation: none; opacity: 1; }
}