/* =========================================================
   Mauzo Express — Home page styles
   Color system, typography, and components not covered by
   Bootstrap 5 utilities.
   ========================================================= */

:root {
    --mx-navy: #1E1B1E;
    --mx-navy-soft: #312D8A;
    --mx-lime: #F7E108;
    --mx-lime-dark: #E34B28;
    --mx-mint: #ED1174;
    --mx-cream: #F5F4F7;
    --mx-white: #FFFFFF;
    --mx-muted: #5B5760;
    --mx-muted-dark: rgba(255, 255, 255, .7);
    --mx-border: rgba(30, 27, 30, .1);
    --mx-hairline: #E5E5E5;
    --mx-hairline-dark: rgba(255, 255, 255, .1);
    --mx-radius: 1.25rem;
    --mx-radius-lg: 1.75rem;
    --mx-shadow: 0 1.5rem 3rem rgba(30, 27, 30, .08);
}

body {
    font-family: "Instrument Sans", sans-serif;
    color: var(--mx-navy);
    background-color: var(--mx-white);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Instrument Sans", sans-serif;
    letter-spacing: -0.02em;
}

/* ---------- Color / text utilities ---------- */
.mx-navy-text { color: var(--mx-navy); }
.mx-muted-text { color: var(--mx-muted); }
.mx-muted-text-dark { color: var(--mx-muted-dark); }
.mx-highlight { color: var(--mx-mint); }

.mx-cream-bg { background-color: var(--mx-cream); }
.mx-navy-bg { background-color: var(--mx-navy); }

/* ---------- Buttons ---------- */
.mx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .7rem 1.6rem;
    border-radius: .65rem;
    font-weight: 600;
    font-size: .95rem;
    border: 1.5px solid transparent;
    text-decoration: none;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.mx-btn:hover { transform: translateY(-1px); }

.mx-btn-dark {
    background-color: var(--mx-navy);
    color: var(--mx-white);
    border-color: var(--mx-navy);
}
.mx-btn-dark:hover { background-color: #322d33; color: var(--mx-white); }

.mx-btn-outline-dark {
    background-color: transparent;
    color: var(--mx-navy);
    border-color: rgba(30, 27, 30, .25);
}
.mx-btn-outline-dark:hover { background-color: var(--mx-navy); color: var(--mx-white); border-color: var(--mx-navy); }

.mx-btn-yellow {
    background-color: var(--mx-lime);
    color: var(--mx-navy);
    border-color: var(--mx-lime);
}
.mx-btn-yellow:hover { background-color: #ffe940; border-color: #ffe940; color: var(--mx-navy); }

.mx-btn-outline-light {
    background-color: transparent;
    color: var(--mx-white);
    border-color: rgba(255, 255, 255, .3);
}
.mx-btn-outline-light:hover { background-color: rgba(255, 255, 255, .12); color: var(--mx-white); border-color: rgba(255, 255, 255, .5); }

/* ---------- Announcement bar ---------- */
.mx-announcement {
    background-color: var(--mx-navy);
    color: var(--mx-white);
    border: none;
    border-radius: 0;
    position: relative;
}
.mx-announcement-close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

/* ---------- Navbar ---------- */
.mx-navbar {
    background-color: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid transparent;
    transition: box-shadow .25s ease, padding .25s ease, border-color .25s ease;
}
.mx-navbar.is-scrolled {
    box-shadow: var(--mx-shadow);
    border-bottom-color: var(--mx-border);
    padding-top: .65rem;
    padding-bottom: .65rem;
}
.mx-navbar .navbar-brand img { height: 30px; width: auto; display: block; }
.mx-navbar .nav-link {
    color: var(--mx-navy);
    font-weight: 500;
    padding-left: .9rem;
    padding-right: .9rem;
}
.mx-navbar .nav-link.active,
.mx-navbar .nav-link:hover { color: var(--mx-mint); }

/* ---------- Hero ---------- */
.mx-hero {
    position: relative;
    background-color: var(--mx-white);
    padding-top: 7.5rem;
    padding-bottom: 4.5rem;
    overflow: hidden;
}
.mx-hero-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(30, 27, 30, .12) 1.5px, transparent 1.5px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 55% 70% at 100% 0%, black 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 55% 70% at 100% 0%, black 30%, transparent 75%);
    pointer-events: none;
}
.mx-hero h1 {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1.08;
}
@media (min-width: 768px) {
    .mx-hero h1 { font-size: 3.75rem; }
}
@media (min-width: 1200px) {
    .mx-hero h1 { font-size: 4.5rem; }
}

.mx-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem 1.1rem;
    border-radius: .65rem;
    border: 1px solid var(--mx-border);
    background-color: var(--mx-white);
    font-size: .85rem;
    font-weight: 500;
    color: var(--mx-navy);
    transition: border-color .18s ease, transform .18s ease;
}
.mx-chip:hover { border-color: var(--mx-mint); color: var(--mx-mint); transform: translateY(-1px); }
.mx-chip i { color: var(--mx-mint); }

/* ---------- Partners marquee ---------- */
.mx-partners-row {
    display: flex;
    align-items: stretch;
    min-height: 120px;
}
.mx-partners-label {
    flex-shrink: 0;
    width: 220px;
    display: flex;
    align-items: center;
    padding: 1.5rem;
    border-right: 1px solid var(--mx-hairline);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--mx-muted);
    line-height: 1.4;
}
.mx-partners-marquee-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, black 88%, transparent 100%);
}
.mx-partners-track {
    display: flex;
    height: 100%;
    width: max-content;
    animation: mx-marquee 32s linear infinite;
}
.mx-partners-marquee-wrap:hover .mx-partners-track {
    animation-play-state: paused;
}
.mx-partner-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
    height: 100%;
    padding: 1.5rem 2.75rem;
    border-right: 1px solid var(--mx-hairline);
    white-space: nowrap;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--mx-navy);
    opacity: .55;
    background-color: var(--mx-white);
}
.mx-partner-item i { color: var(--mx-mint); font-size: 1.15rem; }

@keyframes mx-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 575.98px) {
    .mx-partners-label { display: none; }
}

/* ---------- Section heading ---------- */
.mx-section-eyebrow {
    display: inline-block;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--mx-mint);
    margin-bottom: .75rem;
}
.mx-section-title {
    font-size: 2.25rem;
    font-weight: 700;
}
@media (min-width: 768px) {
    .mx-section-title { font-size: 2.75rem; }
}

/* ---------- Bento grid ---------- */
.mx-bento-card {
    border-radius: var(--mx-radius-lg);
    padding: 2.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}
.mx-bento-card .mx-bento-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.mx-bento-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: .5rem;
}
.mx-bento-card p { margin-bottom: 0; }

.mx-bento-dark { background-color: var(--mx-navy); color: var(--mx-muted-dark); }
.mx-bento-dark h3 { color: var(--mx-white); }
.mx-bento-dark .mx-bento-icon { background-color: rgba(247, 225, 8, .15); color: var(--mx-lime); }

.mx-bento-yellow { background-color: var(--mx-lime); color: rgba(30, 27, 30, .78); }
.mx-bento-yellow h3 { color: var(--mx-navy); }
.mx-bento-yellow .mx-bento-icon { background-color: rgba(30, 27, 30, .1); color: var(--mx-navy); }

.mx-bento-outline { background-color: var(--mx-white); color: var(--mx-muted); border: 1px solid var(--mx-border); }
.mx-bento-outline h3 { color: var(--mx-navy); }
.mx-bento-outline .mx-bento-icon { background-color: rgba(237, 17, 116, .1); color: var(--mx-mint); }

/* ---------- Split panels ---------- */
.mx-panel {
    border-radius: var(--mx-radius-lg);
    padding: 2.5rem;
    height: 100%;
}
.mx-panel-light { background-color: var(--mx-cream); border: 1px solid var(--mx-border); }
.mx-panel-dark { background-color: var(--mx-navy); color: var(--mx-muted-dark); }
.mx-panel-dark h2 { color: var(--mx-white); }

.mx-panel-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.mx-panel-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .9rem;
    font-size: .98rem;
}
.mx-panel-list i { color: var(--mx-mint); margin-top: .2rem; flex-shrink: 0; }
.mx-panel-dark .mx-panel-list i { color: var(--mx-lime); }

/* ---------- Stats / trusted-by ---------- */
.mx-stat-num {
    font-size: 2rem;
    font-weight: 700;
    color: var(--mx-navy);
}

.mx-vendor-logo {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 600;
    font-size: .85rem;
    color: var(--mx-muted);
    opacity: .75;
}

/* ---------- Steps ---------- */
.mx-step-card {
    border-radius: var(--mx-radius);
    border: 1px solid var(--mx-border);
    padding: 2rem;
    height: 100%;
}
.mx-step-num {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .75rem;
    background-color: var(--mx-navy);
    color: var(--mx-lime);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 1.25rem;
}

/* ---------- CTA band ---------- */
.mx-cta-band {
    background-color: var(--mx-navy);
    border-radius: var(--mx-radius-lg);
    padding: 3.5rem 2rem;
    text-align: center;
}

/* ---------- FAQ accordion ---------- */
.mx-accordion .accordion-item {
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius) !important;
    overflow: hidden;
    margin-bottom: .85rem;
    background-color: var(--mx-white);
}
.mx-accordion .accordion-button {
    background-color: var(--mx-white);
    color: var(--mx-navy);
    font-weight: 600;
    box-shadow: none;
}
.mx-accordion .accordion-button:not(.collapsed) {
    background-color: var(--mx-cream);
    color: var(--mx-navy);
}
.mx-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}
.mx-accordion .accordion-button::after {
    background-image: none;
    font-family: "bootstrap-icons";
    content: "\f64d";
    font-size: 1rem;
    width: auto;
    height: auto;
    transition: none;
    color: var(--mx-mint);
}
.mx-accordion .accordion-button:not(.collapsed)::after {
    content: "\f2ea";
}
.mx-accordion .accordion-body {
    color: var(--mx-muted);
    font-size: .92rem;
    background-color: var(--mx-cream);
}

/* ---------- News cards ---------- */
.mx-news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--mx-radius);
    border: 1px solid var(--mx-border);
    overflow: hidden;
    background-color: var(--mx-white);
    transition: box-shadow .2s ease, transform .2s ease;
}
.mx-news-card:hover {
    box-shadow: var(--mx-shadow);
    transform: translateY(-3px);
}
.mx-news-img-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.mx-news-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mx-news-badge {
    position: absolute;
    top: .9rem;
    left: .9rem;
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    border-radius: .5rem;
    background-color: var(--mx-white);
    color: var(--mx-navy);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.mx-news-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.mx-news-meta {
    font-size: .78rem;
    color: var(--mx-muted);
    margin-bottom: .6rem;
}
.mx-news-body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: .6rem;
}
.mx-news-body p {
    color: var(--mx-muted);
    font-size: .92rem;
    margin-bottom: 1.25rem;
}
.mx-news-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    font-weight: 600;
    font-size: .9rem;
    color: var(--mx-navy);
    text-decoration: none;
}
.mx-news-link i { color: var(--mx-mint); transition: transform .18s ease; }
.mx-news-card:hover .mx-news-link i { transform: translateX(3px); }

/* ---------- Footer ---------- */
.mx-footer-logo-chip {
    display: inline-flex;
    background-color: var(--mx-white);
    border-radius: .65rem;
    padding: .5rem .85rem;
    text-decoration: none;
}
.mx-footer-logo-chip img { height: 26px; width: auto; display: block; }

.mx-footer-links li { margin-bottom: .6rem; }
.mx-footer-links a {
    color: var(--mx-muted-dark);
    text-decoration: none;
}
.mx-footer-links a:hover { color: var(--mx-lime); }

.mx-social-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .6rem;
    background-color: rgba(255, 255, 255, .08);
    color: var(--mx-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: background-color .18s ease, transform .18s ease;
}
.mx-social-icon:hover { background-color: var(--mx-lime); color: var(--mx-navy); transform: translateY(-2px); }

/* ---------- Section dividers (Laravel-style hairline grid) ---------- */
.mx-divider {
    position: relative;
    border-top: 1px solid var(--mx-hairline);
}
.mx-divider-dark {
    position: relative;
    border-top: 1px solid var(--mx-hairline-dark);
}
.mx-rule-x {
    position: relative;
}
@media (min-width: 1200px) {
    .mx-rule-x {
        border-left: 1px dashed var(--mx-hairline);
        border-right: 1px dashed var(--mx-hairline);
    }
    .mx-navy-bg .mx-rule-x {
        border-left-color: var(--mx-hairline-dark);
        border-right-color: var(--mx-hairline-dark);
    }
    /* Corner markers where the top divider meets the vertical rules */
    .mx-rule-x::before,
    .mx-rule-x::after {
        content: "";
        position: absolute;
        top: -4px;
        width: 7px;
        height: 7px;
        background-color: var(--mx-mint);
        pointer-events: none;
        z-index: 1;
    }
    .mx-rule-x::before { left: -4px; }
    .mx-rule-x::after { right: -4px; }
    .mx-navy-bg .mx-rule-x::before,
    .mx-navy-bg .mx-rule-x::after {
        background-color: var(--mx-lime);
    }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .mx-hero { padding-top: 8.5rem; }
    .mx-panel { padding: 2rem; }
}

@media (max-width: 575.98px) {
    .mx-hero { padding-top: 9rem; }
    .mx-bento-card, .mx-cta-band { padding: 1.75rem; }
}

@media (max-width: 560.98px) {
    .mx-hero { padding-top: 2rem; }
}

/* =========================================================
   Two Powerful Solutions — Ordering & Inventory showcase
   ========================================================= */

/* ---------- Headline strip ---------- */
.mx-solutions-strip { overflow: hidden; }
.mx-solutions-pattern {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(30, 27, 30, .08) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 60% 100% at 50% 0%, black 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 60% 100% at 50% 0%, black 20%, transparent 75%);
    pointer-events: none;
}
.mx-display-title {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
}
@media (min-width: 768px) { .mx-display-title { font-size: 3.25rem; } }
@media (min-width: 1200px) { .mx-display-title { font-size: 4rem; } }

/* ---------- Decorative mode toggle ---------- */
.mx-mode-toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: .65rem;
}
.mx-mode-toggle-label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--mx-muted);
    opacity: .5;
}
.mx-mode-toggle-label-a { animation: mx-toggle-fade-a 4s ease-in-out infinite; }
.mx-mode-toggle-label-b { animation: mx-toggle-fade-b 4s ease-in-out infinite; }
.mx-mode-toggle-track {
    position: relative;
    display: inline-block;
    width: 2.75rem;
    height: 1.5rem;
    border-radius: 999px;
    background-color: var(--mx-navy);
    flex-shrink: 0;
}
.mx-mode-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background-color: var(--mx-lime);
    animation: mx-toggle-slide 4s ease-in-out infinite;
}
@keyframes mx-toggle-slide {
    0%, 40% { transform: translateX(0); }
    50%, 90% { transform: translateX(1.25rem); }
    100% { transform: translateX(0); }
}
@keyframes mx-toggle-fade-a {
    0%, 40% { opacity: 1; color: var(--mx-navy); }
    50%, 100% { opacity: .5; color: var(--mx-muted); }
}
@keyframes mx-toggle-fade-b {
    0%, 40% { opacity: .5; color: var(--mx-muted); }
    50%, 90% { opacity: 1; color: var(--mx-navy); }
    91%, 100% { opacity: .5; color: var(--mx-muted); }
}
@media (prefers-reduced-motion: reduce) {
    .mx-mode-toggle-thumb, .mx-mode-toggle-label-a, .mx-mode-toggle-label-b { animation: none; }
}

/* ---------- Solutions split (intro + tabbed panel) ---------- */
.mx-solutions-split { align-items: stretch; }
.mx-solutions-intro {
    padding: 3rem 1.75rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mx-solutions-intro h3 { font-size: 1.85rem; font-weight: 700; margin-bottom: .75rem; }
.mx-solutions-panel {
    padding: 3rem 1.75rem;
    height: 100%;
    border-top: 1px solid var(--mx-hairline);
}
@media (min-width: 992px) {
    .mx-solutions-intro { padding: 3.5rem 3rem; }
    .mx-solutions-panel { padding: 3.5rem 3rem; border-top: none; border-left: 1px solid var(--mx-hairline); }
}

.mx-solutions-nav {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    background-color: var(--mx-cream);
    border-radius: 999px;
    padding: .3rem;
    margin-bottom: 1.75rem;
}
.mx-solutions-nav .nav-link {
    border: none;
    border-radius: 999px;
    padding: .55rem 1.1rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--mx-muted);
    background-color: transparent;
    transition: background-color .18s ease, color .18s ease;
}
.mx-solutions-nav .nav-link.active {
    background-color: var(--mx-white);
    color: var(--mx-navy);
    box-shadow: var(--mx-shadow);
}

/* ---------- Mock UI panels ---------- */
.mx-mock-panel {
    border-radius: var(--mx-radius);
    border: 1px solid var(--mx-border);
    background-color: var(--mx-white);
    box-shadow: var(--mx-shadow);
    overflow: hidden;
}
.mx-mock-panel-head {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid var(--mx-hairline);
    background-color: var(--mx-cream);
}
.mx-mock-dot { width: .55rem; height: .55rem; border-radius: 50%; flex-shrink: 0; }
.mx-mock-dot-red { background-color: #F04438; }
.mx-mock-dot-yellow { background-color: var(--mx-lime); }
.mx-mock-dot-green { background-color: #12B76A; }
.mx-mock-panel-title {
    margin-left: .5rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--mx-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mx-mock-timeline {
    list-style: none;
    margin: 0;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.mx-mock-timeline li {
    position: relative;
    padding-left: 1.75rem;
    font-size: .88rem;
    font-weight: 500;
    color: var(--mx-muted);
}
.mx-mock-timeline-dot {
    position: absolute;
    left: 0;
    top: .15rem;
    width: .85rem;
    height: .85rem;
    border-radius: 50%;
    background-color: var(--mx-white);
    border: 2px solid var(--mx-border);
}
.mx-mock-timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: .41rem;
    top: 1rem;
    width: 2px;
    height: calc(100% + .55rem);
    background-color: var(--mx-hairline);
}
.mx-mock-timeline li.is-done { color: var(--mx-navy); }
.mx-mock-timeline li.is-done .mx-mock-timeline-dot { background-color: var(--mx-mint); border-color: var(--mx-mint); }
.mx-mock-timeline li.is-active { color: var(--mx-navy); font-weight: 700; }
.mx-mock-timeline li.is-active .mx-mock-timeline-dot { background-color: var(--mx-lime); border-color: var(--mx-lime); box-shadow: 0 0 0 4px rgba(247, 225, 8, .25); }

.mx-mock-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background-color: var(--mx-hairline);
}
.mx-mock-kpi { background-color: var(--mx-white); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.mx-mock-kpi-value { font-size: 1.2rem; font-weight: 700; color: var(--mx-navy); }
.mx-mock-kpi-label { font-size: .72rem; color: var(--mx-muted); text-transform: uppercase; letter-spacing: .03em; }
.mx-mock-kpi-warn .mx-mock-kpi-value { color: var(--mx-lime-dark); }

.mx-mock-bars {
    list-style: none;
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    height: 90px;
    margin: 0;
    padding: 1.25rem;
    border-top: 1px solid var(--mx-hairline);
}
.mx-mock-bars li {
    flex: 1;
    height: var(--h);
    border-radius: .3rem .3rem 0 0;
    background: linear-gradient(180deg, var(--mx-lime), var(--mx-lime-dark));
}

.mx-mock-panel-lg .mx-mock-timeline { padding: 1.75rem 2rem; }
.mx-mock-panel-lg .mx-mock-kpi { padding: 1.5rem 1.75rem; }

/* ---------- Deep-dive feature rows ---------- */
.mx-feature-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border-top: 1px solid var(--mx-hairline);
}
.mx-feature-row:first-child { border-top: none; }
.mx-feature-row-reverse { flex-direction: row-reverse; }
.mx-feature-text {
    flex: 1 1 380px;
    padding: 3rem 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.mx-feature-text h3 { font-size: 1.85rem; font-weight: 700; margin: .5rem 0 .75rem; }
.mx-feature-visual {
    flex: 1 1 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.75rem;
}
.mx-feature-visual-dark { background-color: var(--mx-navy); }
.mx-feature-visual-light { background-color: var(--mx-cream); }
.mx-feature-visual .mx-mock-panel { width: 100%; max-width: 420px; }
@media (min-width: 992px) {
    .mx-feature-text { padding: 4rem 3rem; }
    .mx-feature-visual { padding: 3rem; }
}
@media (min-width: 576px) {
    .mx-panel-list-2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
}

/* ---------- Partner cards ---------- */
.mx-partner-card {
    border-radius: var(--mx-radius);
    border: 1px solid var(--mx-border);
    background-color: var(--mx-white);
    padding: 1.75rem;
    height: 100%;
}
.mx-partner-card-icon {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    background-color: rgba(237, 17, 116, .1);
    color: var(--mx-mint);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}
.mx-partner-card h4 { font-size: 1.1rem; font-weight: 700; color: var(--mx-navy); margin-bottom: .4rem; }
.mx-partner-card p { color: var(--mx-muted); font-size: .9rem; margin-bottom: 0; }

/* ---------- CTA band pattern overlay ---------- */
.mx-cta-band-pattern { position: relative; overflow: hidden; }
.mx-cta-band-pattern::before {
    content: "";
    position: absolute;
    inset: -20%;
    background-image:
        linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
    background-size: 32px 32px;
    transform: rotate(8deg);
    -webkit-mask-image: radial-gradient(60% 80% at 50% 100%, black 30%, transparent 75%);
    mask-image: radial-gradient(60% 80% at 50% 100%, black 30%, transparent 75%);
    pointer-events: none;
}
.mx-cta-band-pattern > * { position: relative; z-index: 1; }

/* ---------- Solutions responsive ---------- */
@media (max-width: 991.98px) {
    .mx-feature-row, .mx-feature-row-reverse { flex-direction: column; }
}
@media (max-width: 575.98px) {
    .mx-mode-toggle-label { display: none; }
    .mx-solutions-intro, .mx-solutions-panel { padding: 2.25rem 1.25rem; }
    .mx-feature-text, .mx-feature-visual { padding: 2.25rem 1.25rem; }
}