:root {
    --mx-logo-green: #2ee58a;
    --mx-logo-yellow: #ffcc33;
    --mx-logo-magenta: #e84fa3;
    --mx-logo-purple: #9b5cff;
    --mx-logo-blue: #4f8cff;
    --mx-logo-green-rgb: 46, 229, 138;
    --mx-logo-yellow-rgb: 255, 204, 51;
    --mx-logo-magenta-rgb: 232, 79, 163;
    --mx-logo-purple-rgb: 155, 92, 255;
    --mx-brand-gradient: linear-gradient(var(--angle, 90deg), var(--mx-logo-green) 0%, var(--mx-logo-yellow) 45%, var(--mx-logo-magenta) 100%);
    --mx-brand-gradient-soft: linear-gradient(var(--angle, 90deg), rgba(var(--mx-logo-green-rgb), var(--opacity, 1)) 0%, rgba(var(--mx-logo-yellow-rgb), var(--opacity, 1)) 48%, rgba(var(--mx-logo-magenta-rgb), var(--opacity, 1)) 100%);
    --mx-brand-gradient-cool: linear-gradient(var(--angle, 90deg), var(--mx-logo-magenta) 0%, var(--mx-logo-purple) 52%, var(--mx-logo-blue) 100%);
    --bs-primary: var(--mx-logo-green);
    --bs-primary-dark: #19b96a;
    --bs-primary-light: #a7ffd0;
    --bs-primary-rgb: var(--mx-logo-green-rgb);
    --bs-primary-dark-rgb: 25, 185, 106;
    --bs-primary-light-rgb: 167, 255, 208;
}

.text-light {
    color: rgba(255, 255, 255, var(--bs-text-opacity, 1)) !important;
}

.text-light.text-opacity-75 {
    --bs-text-opacity: .82;
}

.text-light.text-opacity-50 {
    --bs-text-opacity: .68;
}

.mx-module-card .module-label,
.mx-module-card .module-label.text-gradient-a,
.mx-module-card .module-label.text-gradient-b,
.mx-module-card .module-label.text-gradient-c {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(var(--mx-logo-green-rgb), .42);
    background-clip: padding-box !important;
    color: rgba(255, 255, 255, .94) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, .94);
    box-shadow: inset 0 0 10px rgba(var(--mx-logo-green-rgb), .08);
}

.badge[class*="bg-gradient-"],
.badge[class*="bg-gradient-"].text-background {
    color: #06101b !important;
    -webkit-text-fill-color: #06101b;
}

.text-gradient-heading,
.text-gradient-a,
.text-gradient-c,
.text-gradient-heading *,
.text-gradient-a *,
.text-gradient-c * {
    background-image: var(--mx-brand-gradient) !important;
    background-clip: text;
    color: rgba(0, 0, 0, 0) !important;
}

.bg-gradient-heading,
.bg-gradient-a,
.bg-gradient-c {
    background-image: var(--mx-brand-gradient) !important;
}

.text-gradient-b,
.text-gradient-b * {
    background-image: var(--mx-brand-gradient-cool) !important;
    background-clip: text;
    color: rgba(0, 0, 0, 0) !important;
}

.bg-gradient-b {
    background-image: var(--mx-brand-gradient-cool) !important;
}

.btn-primary {
    --bs-btn-color: #06101b;
    --bs-btn-border-color: transparent;
    --bs-btn-background-image: linear-gradient(var(--gradient-bg-angle, 90deg), var(--mx-logo-green) 0%, var(--mx-logo-yellow) 50%, var(--mx-logo-magenta) 100%);
    --bs-btn-hover-color: #06101b;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-hover-background-image: linear-gradient(var(--gradient-bg-angle, 90deg), var(--mx-logo-yellow) 0%, var(--mx-logo-green) 48%, var(--mx-logo-magenta) 100%);
    --bs-btn-active-color: #06101b;
    --bs-btn-active-border-color: transparent;
    --bs-btn-active-background-image: var(--mx-brand-gradient);
}

.btn-glow,
.btn-hover-glow:hover,
.badge-glow {
    --bs-btn-bg: rgba(var(--mx-logo-green-rgb), .1);
    --bs-btn-border-color: rgba(var(--mx-logo-green-rgb), .35);
    --bs-btn-box-shadow: inset 0 1px 10px rgba(var(--mx-logo-green-rgb), .16), 0 0 22px rgba(var(--mx-logo-magenta-rgb), .08);
    --bs-badge-shadow: inset 0 0 8px 2px rgba(var(--mx-logo-green-rgb), .2), 0 0 18px rgba(var(--mx-logo-magenta-rgb), .08);
}

.btn-line-animated {
    --beam-color-start: var(--mx-logo-green);
    --beam-color-middle: var(--mx-logo-yellow);
    --beam-color-end: var(--mx-logo-magenta);
}

.beam-conic {
    background: conic-gradient(from 90deg, transparent 0deg, var(--mx-logo-green) 70deg, var(--mx-logo-yellow) 115deg, var(--mx-logo-magenta) 150deg, transparent 190deg) !important;
}

.gradient-separator {
    --saparator-color: rgba(var(--mx-logo-green-rgb), .65);
    background: linear-gradient(to right, transparent 12%, rgba(var(--mx-logo-green-rgb), .65) 30%, rgba(var(--mx-logo-yellow-rgb), .7) 50%, rgba(var(--mx-logo-magenta-rgb), .65) 70%, transparent 88%) !important;
}

.gradient-separator-large {
    background: linear-gradient(to right, transparent 10%, rgba(var(--mx-logo-green-rgb), .65) 26%, rgba(var(--mx-logo-yellow-rgb), .72) 50%, rgba(var(--mx-logo-magenta-rgb), .65) 74%, transparent 90%) !important;
}

.card-blend-bottom.featured,
.pricing-card-s1.featured {
    --blend-border: linear-gradient(180deg, rgba(var(--mx-logo-green-rgb), .85) 0%, rgba(var(--mx-logo-yellow-rgb), .55) 42%, rgba(var(--mx-logo-magenta-rgb), .75) 100%);
}

.nav-pills,
.pricing-switcher {
    --bs-nav-link-active-border-color: rgba(var(--mx-logo-green-rgb), .9);
    --bs-nav-pills-link-active-bg: rgba(var(--mx-logo-green-rgb), .16);
    --switcher-active-border-color: rgba(var(--mx-logo-green-rgb), .65);
    --switcher-active-bg: linear-gradient(90deg, rgba(var(--mx-logo-green-rgb), .18), rgba(var(--mx-logo-magenta-rgb), .14));
}

.nk-running-line {
    --line-color: rgba(var(--mx-logo-green-rgb), 1);
}

.has-spotlight {
    --spotlight-color: rgba(var(--mx-logo-green-rgb), .18);
}

.nk-pulse-ring {
    --ring-color: rgba(var(--mx-logo-green-rgb), .45);
}

.nk-promptbox:before {
    background: linear-gradient(var(--gradient-angle), var(--mx-logo-green) 0%, var(--mx-logo-yellow) 45%, var(--mx-logo-magenta) 78%, var(--mx-logo-purple) 100%) !important;
}

.nk-promptbox:after {
    --gradient-color: var(--mx-logo-green);
}

.audio-track-play:before {
    background: radial-gradient(circle, var(--mx-logo-green) 20%, var(--mx-logo-yellow) 58%, var(--mx-logo-magenta) 100%) !important;
}