/* ==========================================================================
   Moozix Warm Neural Vibe
   Loaded late so it can tint page-specific styles without changing layouts.
   ========================================================================== */

:root,
[data-bs-theme="dark"],
[data-bs-theme="light"] {
  --accent: #f4cf57 !important;
  --accent-rgb: 244,207,87 !important;
  --mx-warm-gold: #f4cf57 !important;
  --mx-warm-gold-2: #ffe48a !important;
  --mx-warm-orange: #ff932b !important;
  --mx-warm-magenta: #ff65e1 !important;
  --mx-warm-bg: #07090d !important;
  --mx-warm-surface: rgba(7, 9, 13, .72) !important;
  --mx-warm-border: rgba(255, 200, 69, .18) !important;
  --mx-warm-muted: rgba(218, 228, 238, .78) !important;
  --mx-gold: #f4cf57 !important;
  --mx-gold-2: #ffe48a !important;
  --mx-panel: rgba(7, 9, 13, .72) !important;
  --mx-panel-2: rgba(12, 15, 21, .86) !important;
  --mx-line: rgba(255, 200, 69, .16) !important;
  --blog-gold: #f4cf57 !important;
  --blog-gold-soft: #ffe6a1 !important;
  --stem-gold: #f4cf57 !important;
  --stem-gold-2: #ffe48a !important;
  --stem-blue: #ff932b !important;
  --stem-green: #ff65e1 !important;
  --stem-line: rgba(255, 200, 69, .16) !important;
  --better-gold: #f4cf57 !important;
  --better-gold-2: #ffe48a !important;
  --better-blue: #ff932b !important;
  --better-green: #ff65e1 !important;
  --better-line: rgba(255, 200, 69, .16) !important;
  --glass: rgba(7, 9, 13, .70) !important;
  --glass-border: rgba(255, 200, 69, .16) !important;
}

@keyframes moozixWarmFieldLate {
  0% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 50% 0%; }
  50% { background-position: 8% 4%, 92% 8%, 96% 92%, 5% 88%, 50% 45%; }
  100% { background-position: 0% 8%, 100% 4%, 92% 100%, 2% 96%, 50% 100%; }
}

html,
body {
  background-color: #07090d !important;
}

body {
  color: #eef3fb !important;
  background:
    radial-gradient(58vw 42vw at -10% 10%, rgba(255, 101, 225, .16), transparent 68%),
    radial-gradient(52vw 38vw at 110% -4%, rgba(244, 207, 87, .18), transparent 70%),
    radial-gradient(56vw 40vw at 110% 106%, rgba(255, 147, 43, .15), transparent 72%),
    radial-gradient(48vw 34vw at -8% 104%, rgba(244, 207, 87, .10), transparent 72%),
    linear-gradient(180deg, #080a0f 0%, #05070a 100%) !important;
  background-size: 122% 122%, 120% 120%, 124% 124%, 118% 118%, 100% 100% !important;
  background-attachment: fixed !important;
  animation: moozixWarmFieldLate 30s ease-in-out infinite alternate;
}

.home-page,
.mixing-page,
.dashboard-control-room {
  background-color: transparent !important;
}

.home-hero,
.mix-hero,
.stem-hero,
.better-hero,
.pricing-hero,
.comparison-hero,
.music-video-hero,
.mixstudio-hero,
.movie-backdrop,
.hero {
  background:
    radial-gradient(900px 520px at 8% 5%, rgba(255, 101, 225, .15), transparent 68%),
    radial-gradient(980px 560px at 92% 0%, rgba(244, 207, 87, .18), transparent 70%),
    radial-gradient(860px 520px at 100% 100%, rgba(255, 147, 43, .14), transparent 74%),
    linear-gradient(180deg, rgba(8, 10, 14, .95), rgba(5, 7, 10, .98)) !important;
}

.home-hero::before,
.mix-hero::before,
.dashboard-control-room::before {
  background:
    radial-gradient(58vw 38vh at 8% 14%, rgba(255, 101, 225, .12), transparent 70%),
    radial-gradient(54vw 36vh at 88% 16%, rgba(244, 207, 87, .16), transparent 72%),
    radial-gradient(52vw 38vh at 100% 100%, rgba(255, 147, 43, .12), transparent 74%),
    linear-gradient(180deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, .58)) !important;
}

.home-hero-video,
.mix-hero-video,
.dashboard-bg-video {
  opacity: .24 !important;
  filter: saturate(.78) sepia(.22) hue-rotate(308deg) contrast(1.05) !important;
}

h1,
.display-1,
.display-2,
.display-3,
.home-hero-title,
.mix-hero-title,
.mix-title,
.stem-wide-title,
.better-wide-title {
  background: linear-gradient(105deg, #fff7dd 0%, #ffe5a4 34%, #ffc845 58%, #ff932b 82%, #ff65e1 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 34px rgba(244, 207, 87, .12);
}

.home-highlight,
.text-brand,
.accent-color {
  color: #ffe48a !important;
  -webkit-text-fill-color: #ffe48a !important;
}

.home-hero-title span,
.home-section-title span,
.home-duo-panel h3 span,
.home-bottom h2 span,
.mix-title span,
.mix-hero-title span,
.mix-bottom h2 span,
.pricing-title span,
.pricing-section-title span,
.pricing-plan-name span,
.pricing-bottom h2 span,
.stem-title span,
.stem-section-title span,
.stem-wide-title span,
.better-title span,
.better-section-title span,
.better-wide-title span,
.blog-hero h1 span,
.register-title span,
.login-title span,
.pro-promo-title span,
.public-video-hero-title span,
.mix-example-section .mix-title span,
h1 .text-brand,
h2 .text-brand,
h3 .text-brand,
h4 .text-brand,
h5 .text-brand,
h6 .text-brand,
h1 .accent-color,
h2 .accent-color,
h3 .accent-color,
h4 .accent-color,
h5 .accent-color,
h6 .accent-color,
h1 .text-warning,
h2 .text-warning,
h3 .text-warning,
h4 .text-warning,
h5 .text-warning,
h6 .text-warning,
.display-1 span:not(.text-secondary),
.display-2 span:not(.text-secondary),
.display-3 span:not(.text-secondary),
.display-4 span:not(.text-secondary),
.display-5 span:not(.text-secondary),
.display-6 span:not(.text-secondary) {
  background: linear-gradient(105deg, #fff0b2 0%, #ffc845 36%, #ff932b 70%, #ff65e1 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: 0 0 28px rgba(244, 207, 87, .12);
}

.card,
.panel,
.glass-card,
.card-glass,
.glow-card,
.modal-content,
.dropdown-menu,
.accordion-item,
.list-group-item,
.table,
.dash-module,
.pricing-card,
.mv-preview-card,
.mv-review-card,
.daw-session-card,
.blog-cta-panel,
.blog-bottom-cta,
.mix-example-cta,
.cta-card {
  border-color: rgba(255, 200, 69, .17) !important;
  background:
    radial-gradient(52% 42% at 0% 0%, rgba(255, 101, 225, .09), transparent 72%),
    radial-gradient(48% 38% at 100% 8%, rgba(244, 207, 87, .12), transparent 74%),
    radial-gradient(58% 46% at 100% 100%, rgba(255, 147, 43, .10), transparent 78%),
    rgba(7, 9, 13, .72) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

.card.mix-loading-card,
.mx-panel.mix-loading-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.card.mix-loading-card::before,
.card.mix-loading-card::after,
.mx-panel.mix-loading-card::before,
.mx-panel.mix-loading-card::after {
  content: none !important;
  display: none !important;
}

.mix-loading-card .card-body,
.mix-processing-stage {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mix-loading-card .modal-footer {
  display: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.btn-primary,
.btn-brand,
.nav-cta,
.home-primary-btn,
.mix-primary,
.stem-primary,
.better-primary,
.blog-mini-cta,
.mix-example-primary,
.pricing-action.is-primary,
.mx-btn-primary,
.mx-primary-btn,
.dash-primary-cta .dash-btn,
.daw-sessions-empty-cta .daw-sessions-primary {
  background: linear-gradient(180deg, #fff0b2 0%, #ffc845 48%, #ff932b 100%) !important;
  border-color: rgba(255, 205, 82, .92) !important;
  color: #1a1206 !important;
  box-shadow: 0 18px 42px rgba(244, 181, 17, .28), 0 0 30px rgba(255, 101, 225, .08) !important;
}

.btn-primary *,
.btn-brand *,
.nav-cta *,
.home-primary-btn *,
.mix-primary *,
.stem-primary *,
.better-primary *,
.blog-mini-cta *,
.mix-example-primary *,
.pricing-action.is-primary *,
.mx-btn-primary *,
.mx-primary-btn *,
.dash-primary-cta .dash-btn *,
.daw-sessions-empty-cta .daw-sessions-primary * {
  color: inherit !important;
}

.btn-primary:hover,
.btn-brand:hover,
.nav-cta:hover,
.home-primary-btn:hover,
.mix-primary:hover,
.stem-primary:hover,
.better-primary:hover,
.blog-mini-cta:hover,
.mix-example-primary:hover,
.pricing-action.is-primary:hover,
.mx-btn-primary:hover,
.mx-primary-btn:hover,
.dash-primary-cta .dash-btn:hover,
.daw-sessions-empty-cta .daw-sessions-primary:hover {
  background: linear-gradient(180deg, #fff6cf 0%, #ffd765 50%, #ffa33e 100%) !important;
  color: #1a1206 !important;
}

.btn-outline-primary,
.btn-outline-secondary,
.btn-secondary,
.btn-slick-glass,
.home-secondary-btn,
.mix-secondary,
.stem-secondary,
.better-secondary,
.pricing-action.is-secondary,
.mx-btn:not(.mx-btn-primary),
.daw-sessions-secondary,
.blog-topic-row a {
  border-color: rgba(244, 207, 87, .32) !important;
  color: #ffe6a1 !important;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255, 147, 43, .12), transparent 70%),
    rgba(7, 9, 13, .56) !important;
}

.btn-outline-primary:hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.btn-outline-primary:hover * {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

a.home-primary-btn,
a.mix-primary,
a.stem-primary,
a.better-primary,
a.mix-example-primary,
a.blog-mini-cta,
a.pricing-action.is-primary,
button.btn-primary,
a.btn-primary,
.btn-primary {
  color: #1a1206 !important;
  -webkit-text-fill-color: #1a1206 !important;
}

a.home-primary-btn i,
a.mix-primary i,
a.stem-primary i,
a.better-primary i,
a.mix-example-primary i,
a.blog-mini-cta i,
a.pricing-action.is-primary i,
button.btn-primary i,
a.btn-primary i,
.btn-primary i {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

.form-control,
.form-select,
.input-group-text,
textarea {
  color: #eef3fb !important;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(244, 207, 87, .08), transparent 70%),
    rgba(7, 9, 13, .78) !important;
  border-color: rgba(255, 200, 69, .20) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus {
  border-color: rgba(244, 207, 87, .72) !important;
  box-shadow: 0 0 0 .25rem rgba(244, 207, 87, .16), 0 0 28px rgba(255, 101, 225, .10) !important;
}

.badge,
.badge.bg-secondary,
.badge.bg-dark,
.blog-topic-row a:hover {
  border-color: rgba(255, 200, 69, .22) !important;
  background: rgba(244, 207, 87, .10) !important;
  color: #ffe6a1 !important;
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none !important;
    background-attachment: scroll !important;
  }
}

/* Public pages need the warm look without the GPU tax of stacked fixed radials. */
body.mx-public-page {
  background: linear-gradient(180deg, #080a0f 0%, #05070a 100%) !important;
  background-attachment: scroll !important;
  background-size: auto !important;
  animation: none !important;
}

body.mx-public-page .home-page,
body.mx-public-page .mixing-page,
body.mx-public-page .pricing-page,
body.mx-public-page .blog-index-page {
  background: #05070a !important;
}

body.mx-public-page .moozix-topnav {
  background: rgba(8, 10, 14, .94) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .26) !important;
}

body.mx-public-page .moozix-topnav .dropdown-menu {
  background: rgba(8, 10, 15, .98) !important;
}

body.mx-public-page .home-hero,
body.mx-public-page .mix-hero,
body.mx-public-page .stem-hero,
body.mx-public-page .better-hero,
body.mx-public-page .pricing-hero,
body.mx-public-page .comparison-hero,
body.mx-public-page .music-video-hero,
body.mx-public-page .movie-backdrop,
body.mx-public-page .hero {
  background: linear-gradient(180deg, #080a0f 0%, #05070a 100%) !important;
}

body.mx-public-page .home-hero::before,
body.mx-public-page .mix-hero::before,
body.mx-public-page .public-video-hero::before {
  background: linear-gradient(180deg, rgba(8, 10, 14, .42), rgba(5, 7, 10, .78)) !important;
}

body.mx-public-page .home-section,
body.mx-public-page .mix-section,
body.mx-public-page .pricing-section,
body.mx-public-page .home-bottom,
body.mx-public-page .mix-bottom,
body.mx-public-page .pricing-bottom {
  background: #05070a !important;
}

body.mx-public-page .home-section.is-soft,
body.mx-public-page .mix-section.is-soft,
body.mx-public-page .pricing-section.is-soft {
  background:
    linear-gradient(155deg, rgba(255, 101, 225, .035), transparent 34%),
    linear-gradient(25deg, rgba(244, 207, 87, .045), transparent 42%),
    #07090d !important;
}

body.mx-public-page .home-dna-section,
body.mx-public-page .mix-persona-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #05070a !important;
}

body.mx-public-page .home-dna-section::before,
body.mx-public-page .mix-persona-section::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 2.5rem -8vw !important;
  transform: skewY(-2.4deg) !important;
  background:
    linear-gradient(135deg, rgba(255, 101, 225, .075), rgba(255, 147, 43, .055) 46%, rgba(244, 207, 87, .08)),
    #07090d !important;
  border-top: 1px solid rgba(255, 200, 69, .13) !important;
  border-bottom: 1px solid rgba(255, 101, 225, .08) !important;
  box-shadow: 0 28px 72px rgba(0, 0, 0, .24) !important;
  pointer-events: none !important;
  animation: none !important;
}

body.mx-public-page .home-dna-section .home-shell,
body.mx-public-page .mix-persona-section .mix-shell,
body.mx-public-page .mix-persona-layout {
  position: relative;
  z-index: 1;
}

body.mx-public-page .mix-stream-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(255, 101, 225, .045), transparent 32%),
    linear-gradient(335deg, rgba(255, 147, 43, .055), transparent 36%),
    #06080c !important;
}

body.mx-public-page .mix-stream-section::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(174deg, transparent 0 11%, rgba(244, 207, 87, .055) 11.2% 34%, transparent 34.3% 100%),
    linear-gradient(354deg, transparent 0 70%, rgba(255, 101, 225, .035) 70.2% 88%, transparent 88.4% 100%) !important;
  animation: none !important;
}

body.mx-public-page .mix-stream-layout {
  position: relative;
  z-index: 1;
}

body.mx-public-page .home-hero-video,
body.mx-public-page .mix-hero-video,
body.mx-public-page .public-video-hero-video {
  filter: none !important;
  opacity: .18 !important;
}

body.mx-public-page .card,
body.mx-public-page .panel,
body.mx-public-page .glass-card,
body.mx-public-page .card-glass,
body.mx-public-page .glow-card,
body.mx-public-page .modal-content,
body.mx-public-page .dropdown-menu,
body.mx-public-page .accordion-item,
body.mx-public-page .list-group-item,
body.mx-public-page .table,
body.mx-public-page .pricing-card,
body.mx-public-page .blog-cta-panel,
body.mx-public-page .blog-bottom-cta,
body.mx-public-page .mix-example-cta,
body.mx-public-page .cta-card,
body.mx-public-page .home-duo-panel,
body.mx-public-page .home-product-frame,
body.mx-public-page .home-reference-panel,
body.mx-public-page .home-output-row,
body.mx-public-page .home-path-step,
body.mx-public-page .home-faq-item,
body.mx-public-page .mix-workflow-card,
body.mx-public-page .mix-persona-card,
body.mx-public-page .mix-difference-card,
body.mx-public-page .mix-faq-item,
body.mx-public-page .mix-route,
body.mx-public-page .mix-wave-card,
body.mx-public-page .pricing-table,
body.mx-public-page .pricing-faq-item {
  border-color: rgba(255, 200, 69, .16) !important;
  background: rgba(7, 9, 13, .76) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .24) !important;
}

body.mx-public-page .btn-outline-primary,
body.mx-public-page .btn-outline-secondary,
body.mx-public-page .btn-secondary,
body.mx-public-page .btn-slick-glass,
body.mx-public-page .home-secondary-btn,
body.mx-public-page .mix-secondary,
body.mx-public-page .stem-secondary,
body.mx-public-page .better-secondary,
body.mx-public-page .pricing-action.is-secondary,
body.mx-public-page .mx-btn:not(.mx-btn-primary),
body.mx-public-page .blog-topic-row a {
  background: rgba(7, 9, 13, .56) !important;
}

body.mx-public-page .form-control,
body.mx-public-page .form-select,
body.mx-public-page .input-group-text,
body.mx-public-page textarea {
  background: rgba(7, 9, 13, .78) !important;
}

body.mx-public-page .home-dna-visual::before,
body.mx-public-page .mix-difference-card::after,
body.mx-public-page .pricing-page::before,
body.mx-public-page .pricing-cell::before,
body.mx-public-page .blog-index-page::before,
body.mx-public-page .blog-index-page::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

body.mx-public-page .mix-routeboard::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 38px !important;
  left: 7% !important;
  right: 7% !important;
  border-top: 2px dotted rgba(244, 207, 87, .34) !important;
  animation: none !important;
}

body.mx-public-page .mix-platform-rail::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 26px !important;
  bottom: 26px !important;
  left: 21px !important;
  border-left: 2px dotted rgba(244, 207, 87, .28) !important;
  animation: none !important;
}

body.mx-public-page .home-dna-float,
body.mx-public-page .mix-match-arrow-icon,
body.mx-public-page .mix-waveform span,
body.mx-public-page .blog-eq-motion span {
  animation: none !important;
}

body.mx-public-page .home-bottom {
  position: relative;
  z-index: 1;
  background: #05070a !important;
  opacity: 1 !important;
}

body.mx-public-page .mix-bottom {
  position: relative;
  z-index: 1;
  background: #05070a !important;
  opacity: 1 !important;
}

body.mx-public-page .home-bottom-copy,
body.mx-public-page .mix-bottom-copy {
  animation: none !important;
  animation-timeline: auto !important;
  opacity: 1 !important;
  transform: none !important;
}

/* A richer, static brand pass for homepage and /mixing without animated paint work. */
body.mx-public-page .home-hero,
body.mx-public-page .mix-hero {
  background:
    radial-gradient(880px 460px at 6% 4%, rgba(255, 101, 225, .115), transparent 68%),
    radial-gradient(920px 500px at 94% 2%, rgba(244, 207, 87, .14), transparent 70%),
    linear-gradient(180deg, #080a0f 0%, #05070a 100%) !important;
}

body.mx-public-page .home-section,
body.mx-public-page .mix-section {
  background:
    linear-gradient(118deg, rgba(255, 101, 225, .035), transparent 34%),
    linear-gradient(302deg, rgba(244, 207, 87, .04), transparent 38%),
    #05070a !important;
}

body.mx-public-page .home-section.is-soft,
body.mx-public-page .mix-section.is-soft {
  background:
    linear-gradient(146deg, rgba(255, 101, 225, .055), transparent 36%),
    linear-gradient(28deg, rgba(255, 147, 43, .052), transparent 38%),
    linear-gradient(180deg, #080a0f 0%, #05070a 100%) !important;
}

body.mx-public-page .home-bottom,
body.mx-public-page .mix-bottom {
  background:
    radial-gradient(860px 360px at 50% 0%, rgba(244, 207, 87, .12), transparent 72%),
    linear-gradient(128deg, rgba(255, 101, 225, .05), transparent 34%),
    linear-gradient(232deg, rgba(255, 147, 43, .055), transparent 36%),
    #05070a !important;
}

body.mx-public-page .home-dna-section::before,
body.mx-public-page .mix-persona-section::before {
  background:
    linear-gradient(135deg, rgba(255, 101, 225, .105), rgba(255, 147, 43, .078) 46%, rgba(244, 207, 87, .11)),
    linear-gradient(180deg, rgba(12, 15, 22, .86), rgba(5, 7, 10, .92)) !important;
  border-top-color: rgba(255, 200, 69, .22) !important;
  border-bottom-color: rgba(255, 101, 225, .14) !important;
}

body.mx-public-page .mix-stream-section {
  background:
    linear-gradient(155deg, rgba(255, 101, 225, .065), transparent 34%),
    linear-gradient(335deg, rgba(255, 147, 43, .07), transparent 38%),
    linear-gradient(180deg, #07090d 0%, #05070a 100%) !important;
}

body.mx-public-page .mix-stream-section::before {
  background:
    linear-gradient(174deg, transparent 0 10%, rgba(244, 207, 87, .085) 10.2% 35%, transparent 35.4% 100%),
    linear-gradient(354deg, transparent 0 69%, rgba(255, 101, 225, .055) 69.2% 88%, transparent 88.4% 100%) !important;
}

body.mx-public-page .home-duo-panel,
body.mx-public-page .home-product-frame,
body.mx-public-page .home-reference-panel,
body.mx-public-page .home-output-row,
body.mx-public-page .home-path-step,
body.mx-public-page .mix-workflow-card,
body.mx-public-page .mix-persona-card,
body.mx-public-page .mix-difference-card,
body.mx-public-page .mix-faq-item,
body.mx-public-page .mix-match-map,
body.mx-public-page .mix-wave-card {
  border-color: rgba(255, 200, 69, .18) !important;
  background:
    linear-gradient(138deg, rgba(255, 101, 225, .052), rgba(255, 147, 43, .032) 46%, rgba(244, 207, 87, .052)),
    rgba(7, 9, 13, .78) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

body.mx-public-page .home-duo-panel {
  border-radius: 36px !important;
}

body.mx-public-page .mix-trust-band {
  background:
    linear-gradient(90deg, transparent, rgba(244, 207, 87, .07) 48%, transparent),
    rgba(5, 7, 10, .94) !important;
  border-top: 1px solid rgba(255, 200, 69, .10) !important;
  border-bottom: 1px solid rgba(255, 101, 225, .08) !important;
}

body.mx-public-page .mix-route {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

body.mx-public-page .mix-routeboard {
  column-gap: clamp(1rem, 2vw, 1.8rem) !important;
}

body.mx-public-page .mix-routeboard::before {
  top: 32px !important;
  left: 34px !important;
  right: 34px !important;
  border-top-color: rgba(244, 207, 87, .26) !important;
}

body.mx-public-page .mix-route-head {
  min-height: 66px !important;
}

body.mx-public-page .mix-route-number {
  width: 64px !important;
  height: 64px !important;
  font-size: .96rem !important;
  box-shadow:
    0 0 0 8px #05070a,
    0 14px 30px rgba(244, 181, 17, .20) !important;
}

body.mx-public-page .mix-route-icon {
  left: 45px !important;
  top: 3px !important;
  width: 31px !important;
  height: 31px !important;
  font-size: .82rem !important;
  background: rgba(9, 11, 15, .94) !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .26) !important;
}

body.mx-public-page .mix-route-body {
  padding-right: .65rem !important;
}

body.mx-public-page .mix-route h3 {
  font-size: clamp(1rem, 1.28vw, 1.16rem) !important;
  line-height: 1.16 !important;
}

body.mx-public-page .mix-route p {
  font-size: .94rem !important;
  line-height: 1.52 !important;
}

@media (max-width: 991.98px) {
  body.mx-public-page .mix-routeboard::before {
    top: 28px !important;
    bottom: 28px !important;
    left: 26px !important;
    right: auto !important;
    border-top: 0 !important;
    border-left: 2px dotted rgba(244, 207, 87, .30) !important;
  }

  body.mx-public-page .mix-route-number {
    width: 54px !important;
    height: 54px !important;
  }

  body.mx-public-page .mix-route-icon {
    left: 37px !important;
    width: 28px !important;
    height: 28px !important;
  }
}

/* Internal app pages: keep the warm brand base without fixed animated page chrome. */
html.mx-app-page {
  min-height: 100%;
  background: #07090d !important;
}

body.mx-app-page {
  min-height: 100vh;
  background:
    linear-gradient(135deg, rgba(255, 101, 225, .035), transparent 36%),
    linear-gradient(315deg, rgba(244, 207, 87, .045), transparent 42%),
    #07090d !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
  animation: none !important;
}

body.mx-app-page .moozix-topnav {
  background: rgba(8, 10, 14, .96) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .24) !important;
}

body.mx-app-page .dashboard-control-room::before {
  position: absolute !important;
  background:
    linear-gradient(145deg, rgba(255, 101, 225, .045), transparent 34%),
    linear-gradient(315deg, rgba(244, 207, 87, .055), transparent 42%),
    linear-gradient(180deg, rgba(0, 0, 0, .26), rgba(0, 0, 0, .50)) !important;
  filter: none !important;
  animation: none !important;
}

body.mx-app-page .dashboard-bg-video {
  filter: none !important;
  opacity: .12 !important;
}

body.mx-public-page .blog-topic-row a.blog-mini-cta {
  color: #ffe6a1 !important;
  -webkit-text-fill-color: #ffe6a1 !important;
}

body.mx-public-page .blog-topic-row a.blog-mini-cta i {
  color: #ffc845 !important;
  -webkit-text-fill-color: currentColor !important;
}

body.mx-public-page .home-output-row {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

body.mx-public-page .home-reference-panel {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}