/* ==========================================================================
   MenThee — homepage. Builds on the tokens in premium.css and refines them
   for the homepage's brighter blue / deep navy palette.
   ========================================================================== */

:root {
    --mt-primary: #1560d9;
    --mt-primary-600: #1560d9;
    --mt-primary-700: #0f4cb4;
    --mt-accent: #1560d9;
    --mt-accent-soft: #eaf2fe;
    --mt-ink: #0d2a5c;
    --mt-text: #56637c;
    --mt-muted: #6b7890;
    --mt-surface: #f5f8fd;
    --mt-border: #e3e9f3;
    --mt-navy: #0c2a66;
    --mt-navy-2: #0d3b8c;
    --mt-font-heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --mt-shadow: 0 14px 34px -14px rgba(13, 42, 92, .2);
    --mt-shadow-lg: 0 28px 60px -24px rgba(13, 42, 92, .3);
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.015em;
}

.mt-container {
    width: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
}

.mt-section {
    padding: 88px 0;
}

.mt-section--tint {
    background: var(--mt-surface);
}

/* ---------- Section headings ---------- */
.mt-head {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.mt-head--split {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    max-width: none;
    text-align: left;
}

.mt-head--split > div {
    max-width: 760px;
}

.mt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--mt-primary-600);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.mt-eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.mt-title {
    margin: 0 0 16px;
    color: var(--mt-ink);
    font-family: var(--mt-font-heading);
    font-size: clamp(30px, 3.7vw, 52px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
}

.mt-lead {
    margin: 0;
    color: var(--mt-text);
    font-size: 17.5px;
    line-height: 1.7;
}

/* ---------- Buttons ---------- */
.mt-btn,
.demo-btn.mt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 24px;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-family: var(--mt-font);
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s var(--mt-ease);
}

.mt-btn:hover,
.mt-btn:focus {
    text-decoration: none;
}

.mt-btn:active {
    transform: translateY(1px);
}

.mt-btn--sm,
.demo-btn.mt-btn--sm {
    min-height: 42px;
    padding: 0 18px;
    font-size: 14.5px;
}

.mt-btn--primary,
.demo-btn.mt-btn--primary {
    background: var(--mt-primary-600);
    color: #fff;
    box-shadow: 0 12px 24px -12px rgba(21, 96, 217, .75);
}

.mt-btn--primary:hover,
.demo-btn.mt-btn--primary:hover {
    background: var(--mt-primary-700);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 16px 28px -12px rgba(21, 96, 217, .8);
}

.mt-btn--outline,
.demo-btn.mt-btn--outline {
    background: #fff;
    color: var(--mt-primary-600);
    border-color: var(--mt-primary-600);
}

.mt-btn--outline:hover,
.demo-btn.mt-btn--outline:hover {
    background: var(--mt-accent-soft);
    color: var(--mt-primary-700);
    transform: translateY(-1px);
}

.mt-btn--light,
.demo-btn.mt-btn--light {
    background: #fff;
    color: var(--mt-primary-600);
}

.mt-btn--light:hover,
.demo-btn.mt-btn--light:hover {
    background: var(--mt-accent-soft);
    color: var(--mt-primary-700);
    transform: translateY(-1px);
}

.mt-btn--outline-light,
.demo-btn.mt-btn--outline-light {
    background: rgba(255, 255, 255, .06);
    color: #fff;
    border-color: rgba(255, 255, 255, .45);
}

.mt-btn--outline-light:hover,
.demo-btn.mt-btn--outline-light:hover {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border-color: #fff;
}

.mt-btn i,
.mt-link i {
    font-size: .9em;
    transition: transform .2s var(--mt-ease);
}

.mt-btn:hover .fa-arrow-right,
.mt-link:hover .fa-arrow-right {
    transform: translateX(3px);
}

.mt-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mt-primary-600);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.mt-link:hover {
    color: var(--mt-primary-700);
    text-decoration: none;
}

/* ---------- Colour tones (icon tiles) ---------- */
.mt-tone--blue { background: #1560d9; color: #fff; }
.mt-tone--green { background: #12996b; color: #fff; }
.mt-tone--purple { background: #6d3fe0; color: #fff; }
.mt-tone--orange { background: #f0661c; color: #fff; }
.mt-tone--red { background: #d9541e; color: #fff; }
.mt-tone--teal { background: #0e7d8c; color: #fff; }
.mt-tone--blue-soft { background: #eaf2fe; color: #1560d9; }
.mt-tone--green-soft { background: #e5f6ef; color: #12996b; }
.mt-tone--purple-soft { background: #f0eafd; color: #6d3fe0; }
.mt-tone--teal-soft { background: #e3f4f6; color: #0e7d8c; }

/* ---------- Top bar ---------- */
.demo-bar12.mt-topbar {
    padding: 0;
    background: linear-gradient(90deg, #0f55cc 0%, #1a6be3 100%);
    border: 0;
    animation: none;
}

.mt-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
}

.mt-topbar .demo-message {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: #fff;
    font-size: 13.5px;
    font-weight: 600;
    animation: none;
}

.mt-topbar .demo-message i {
    color: #fff;
    opacity: .9;
}

.mt-topbar__links {
    display: flex;
    align-items: center;
    gap: 24px;
}

.mt-topbar__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, .92);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
}

.mt-topbar__link:hover {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.demo-bar12.mt-topbar .demo-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
    transition: background-color .2s ease, border-color .2s ease;
}

.demo-bar12.mt-topbar .demo-btn:hover {
    background: rgba(255, 255, 255, .22);
    border-color: #fff;
    transform: none;
}

/* ---------- Header: floating glass panel ----------
   The full-width header bar stays invisible; the inner row (.container1)
   is the rounded glass panel. At the top of the page it is clear; once
   premium.js adds `.is-scrolled` (after 8px of scroll) it fills with a cool
   tinted glass, a light rim and a soft shadow.
   The bar itself must not carry a backdrop-filter: that would make it the
   backdrop root and the panel would have nothing behind it to blur. */
:root {
    --mt-header-h: 70px;
    --mt-glass-bg: linear-gradient(120deg, rgba(255, 255, 255, .58) 0%, rgba(232, 241, 255, .40) 55%, rgba(222, 235, 255, .46) 100%);
    --mt-glass-rim: rgba(255, 255, 255, .65);
}

.navbar.navbar-default,
.navbar.navbar-default.affix,
.navbar.navbar-default.affix-top,
.navbar.navbar-default.is-scrolled {
    padding: 8px 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.navbar.navbar-default .container1 {
    position: relative;
    width: calc(100% - 32px);
    max-width: 1240px;
    min-height: calc(var(--mt-header-h) - 16px);
    padding: 0 12px 0 22px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: blur(0) saturate(100%);
    backdrop-filter: blur(0) saturate(100%);
    transition:
        background-color .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        -webkit-backdrop-filter .4s ease,
        backdrop-filter .4s ease;
}

/* Glass sheen: a faint diagonal light across the panel, fades in on scroll */
.navbar.navbar-default .container1::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--mt-glass-bg);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
}

.navbar.navbar-default.is-scrolled .container1 {
    border-color: var(--mt-glass-rim);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .85),
        inset 0 -1px 0 rgba(21, 96, 217, .06),
        0 0 0 1px rgba(13, 42, 92, .05),
        0 18px 40px -18px rgba(13, 42, 92, .35);
    -webkit-backdrop-filter: blur(22px) saturate(190%) brightness(1.04);
    backdrop-filter: blur(22px) saturate(190%) brightness(1.04);
}

.navbar.navbar-default.is-scrolled .container1::before {
    opacity: 1;
}

/* Browsers without backdrop-filter get a near-solid panel so links stay readable */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .navbar.navbar-default.is-scrolled .container1 {
        background: rgba(248, 251, 255, .97);
    }
}

@media (max-width: 680px) {
    .navbar.navbar-default .container1 {
        width: calc(100% - 20px);
        padding: 0 8px 0 14px;
        border-radius: 16px;
    }
}

/* ---------- Header additions ---------- */
#nav-menu-container {
    margin-left: auto;
}

.mt-nav-actions {
    display: flex;
    align-items: center;
    margin-left: 22px;
}

#nav-menu-container .animated-menu > li > a {
    font-size: 15px;
}

/* ---------- Hero ---------- */
.mt-hero {
    position: relative;
    /* Slide up under the transparent sticky header, then pad the content back down */
    margin-top: calc(var(--mt-header-h) * -1);
    padding: calc(64px + var(--mt-header-h)) 0 56px;
    overflow: hidden;
    background:
        radial-gradient(1000px 560px at 78% 30%, rgba(21, 96, 217, .09), transparent 62%),
        linear-gradient(180deg, #f6f9fe 0%, #f9fbfe 70%, #fff 100%);
}

.mt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(21, 96, 217, .1) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(620px 420px at 78% 40%, #000, transparent 70%);
    mask-image: radial-gradient(620px 420px at 78% 40%, #000, transparent 70%);
    pointer-events: none;
}

.mt-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1.02fr;
    gap: 40px;
    align-items: center;
}

.mt-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    padding: 8px 16px;
    border: 1px solid #d3e2fb;
    border-radius: 999px;
    background: #eef4fe;
    color: var(--mt-primary-600);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.mt-pill__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.mt-hero h1 {
    margin: 0 0 26px;
    color: var(--mt-ink);
    font-family: var(--mt-font-heading);
    font-size: clamp(44px, 5.6vw, 78px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.045em;
}

.mt-hero h1 em {
    font-style: normal;
    color: var(--mt-primary-600);
}

.mt-hero__lead {
    max-width: 560px;
    margin: 0 0 34px;
    color: var(--mt-text);
    font-size: 18px;
    line-height: 1.7;
}

.mt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

.mt-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mt-hero__meta li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mt-text);
    font-size: 14.5px;
    font-weight: 500;
}

.mt-hero__meta i {
    color: var(--mt-primary-600);
}

/* Product map */
.mt-hero__visual {
    position: relative;
    height: 620px;
}

.mt-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%, -50%);
    fill: none;
    stroke: #cfdcf2;
    stroke-width: 1.2;
    stroke-dasharray: 3 6;
}

.mt-board {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 330px;
    padding: 18px;
    border: 1px solid var(--mt-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--mt-shadow-lg);
    transform: translate(-50%, -56%);
}

.mt-board__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.mt-board__head strong {
    flex: 1;
    color: var(--mt-ink);
    font-size: 14.5px;
    font-weight: 700;
}

.mt-board__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: var(--mt-primary-600);
    color: #fff;
    font-size: 13px;
}

.mt-board__badge {
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--mt-accent-soft);
    color: var(--mt-primary-600);
    font-size: 11.5px;
    font-weight: 700;
}

.mt-board__tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.mt-board__tiles a {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: background-color .2s ease, box-shadow .2s ease;
    padding: 10px;
    border-radius: 10px;
    background: #f5f8fd;
}

.mt-board__tiles small {
    display: block;
    margin-bottom: 4px;
    color: var(--mt-muted);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.mt-board__tiles b {
    display: block;
    color: var(--mt-ink);
    font-size: 14px;
    font-weight: 800;
}

.mt-board__tiles em {
    display: block;
    margin-top: 4px;
    color: #12996b;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 600;
}

.mt-board__chart {
    height: 96px;
    margin-bottom: 12px;
    padding: 4px 0 0;
    border: 1px solid var(--mt-border);
    border-radius: 12px;
    overflow: hidden;
}

.mt-board__chart svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mt-board__area {
    fill: url(#mtChartFill);
}

.mt-board__line {
    fill: none;
    stroke: var(--mt-primary-600);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.mt-board__insight {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e3e3fb;
    border-radius: 10px;
    background: #f6f5ff;
}

.mt-board__insight i {
    margin-top: 2px;
    color: #6d3fe0;
    font-size: 13px;
}

.mt-board__insight p {
    margin: 0;
    color: var(--mt-text);
    font-size: 12px;
    line-height: 1.5;
}

.mt-board__insight strong {
    color: var(--mt-ink);
}

.mt-chip {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px 11px 11px;
    border: 1px solid var(--mt-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--mt-shadow);
    color: var(--mt-ink);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
}

.mt-chip small {
    display: block;
    margin-top: 2px;
    color: var(--mt-muted);
    font-size: 11.5px;
    font-weight: 500;
}

.mt-chip__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 15px;
}

.mt-chip--erp { left: 2%; top: 7%; }
.mt-chip--hrms { right: 0; top: 1%; }
.mt-chip--crm { left: -4%; top: 47%; }
.mt-chip--ecom { right: -3%; top: 51%; }
.mt-chip--eims { left: 0; bottom: 15%; }
.mt-chip--ams { right: 0; bottom: 14%; }

.mt-chip--ai {
    left: 56%;
    bottom: 2%;
    border-color: transparent;
    background: linear-gradient(135deg, #0c2a66, #123c8f);
    color: #fff;
    transform: translateX(-50%);
}

.mt-chip--ai small {
    color: rgba(255, 255, 255, .78);
}

.mt-chip--ai .mt-chip__icon {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

@media (prefers-reduced-motion: no-preference) {
    .mt-chip:not(.mt-chip--ai) {
        animation: mtFloat 7s ease-in-out infinite;
    }

    .mt-chip--hrms,
    .mt-chip--eims { animation-delay: -2.3s; }
    .mt-chip--crm,
    .mt-chip--ams { animation-delay: -4.6s; }
}

@keyframes mtFloat {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -6px; }
}

/* Product map links */
.mt-board__tiles a:hover,
.mt-board__tiles a:focus-visible {
    background: var(--mt-accent-soft);
    box-shadow: inset 0 0 0 1px #c9dbf6;
    color: inherit;
    text-decoration: none;
}

a.mt-chip {
    text-decoration: none;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--mt-ease);
}

a.mt-chip:hover,
a.mt-chip:focus-visible {
    border-color: #b9cce3;
    box-shadow: var(--mt-shadow-lg);
    color: var(--mt-ink);
    text-decoration: none;
    transform: translateY(-3px);
}

a.mt-chip .mt-chip__icon {
    transition: transform .25s var(--mt-ease);
}

a.mt-chip:hover .mt-chip__icon {
    transform: scale(1.08);
}

/* Highlights card overlapping the hero's bottom edge */
.mt-highlights {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--mt-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--mt-shadow);
}

.mt-highlights li {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 26px 24px;
    border-left: 1px solid var(--mt-border);
}

.mt-highlights li:first-child {
    border-left: 0;
}

.mt-highlights__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--mt-accent-soft);
    color: var(--mt-primary-600);
    font-size: 17px;
}

.mt-highlights strong {
    display: block;
    color: var(--mt-ink);
    font-size: 15px;
    font-weight: 700;
}

.mt-highlights span:not(.mt-highlights__icon) {
    display: block;
    margin-top: 2px;
    color: var(--mt-muted);
    font-size: 13.5px;
    line-height: 1.45;
}

/* ---------- Cards (shared) ---------- */
.mt-grid {
    display: grid;
    gap: 24px;
}

.mt-grid--2 { grid-template-columns: repeat(2, 1fr); }
.mt-grid--3 { grid-template-columns: repeat(3, 1fr); }
.mt-grid--4 { grid-template-columns: repeat(4, 1fr); }

.mt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 30px;
    border: 1px solid var(--mt-border);
    border-radius: 18px;
    background: #fff;
    transition: transform .3s var(--mt-ease), box-shadow .3s ease, border-color .3s ease;
}

.mt-card:hover {
    transform: translateY(-4px);
    border-color: #d3dff1;
    box-shadow: var(--mt-shadow);
}

.mt-card h3 {
    margin: 0 0 12px;
    color: var(--mt-ink);
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

.mt-card p {
    flex: 1;
    margin: 0 0 24px;
    color: var(--mt-text);
    font-size: 15px;
    line-height: 1.7;
}

/* ---------- About ---------- */
.mt-about {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 64px;
    align-items: center;
}

.mt-about .mt-title,
.mt-why2 .mt-title {
    font-size: clamp(30px, 3.5vw, 50px);
}

.mt-about__lead {
    margin: 0 0 18px;
    color: var(--mt-text);
    font-size: 18px;
    line-height: 1.7;
}

.mt-about > div > p:not(.mt-about__lead) {
    margin: 0 0 28px;
    color: var(--mt-ink);
    font-size: 16px;
    line-height: 1.75;
    opacity: .88;
}

.mt-features {
    display: grid;
    gap: 22px;
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
}

.mt-features li {
    display: flex;
    gap: 18px;
}

.mt-features__icon,
.mt-why2__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 17px;
}

.mt-features h3 {
    margin: 0 0 4px;
    color: var(--mt-ink);
    font-size: 17px;
    font-weight: 700;
}

.mt-features p {
    margin: 0;
    color: var(--mt-text);
    font-size: 15px;
    line-height: 1.65;
}

/* ---------- About: interactive AI code sample (CSS only) ----------
   Hidden radios choose the file tab; a hidden checkbox applies / undoes
   the AI suggestion, revealing the added lines as a diff. */
/* Grid items default to min-width:auto; let the columns shrink on small screens. */
.mt-about > * {
    min-width: 0;
}

/* ---------- About: AI illustration ----------
   An SVG of rings and wires from a central AI core to each product. Data
   pulses travel along the wires; hovering a product lights its wire. The
   product nodes are positioned in % of the 520x440 artboard. */
.mt-ai {
    position: relative;
    isolation: isolate;
    padding: 26px 0 50px 24px;
}

.mt-ai__panel {
    position: relative;
    aspect-ratio: 520 / 440;
    border: 1px solid #d6e3f7;
    border-radius: 24px;
    background:
        radial-gradient(rgba(21, 96, 217, .12) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(160deg, #f1f6ff 0%, #e2ecfc 100%);
    box-shadow: var(--mt-shadow-lg);
    overflow: hidden;
}

.mt-ai__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.mt-ai__ring {
    fill: none;
    stroke: rgba(21, 96, 217, .22);
    stroke-width: 1.2;
    transform-box: fill-box;
    transform-origin: center;
}

.mt-ai__ring--b {
    stroke-dasharray: 4 8;
}

.mt-ai__ring--c {
    stroke: rgba(109, 63, 224, .18);
    stroke-dasharray: 2 10;
}

.mt-ai__wire {
    fill: none;
    stroke: rgba(21, 96, 217, .3);
    stroke-width: 1.6;
    transition: stroke .3s ease, stroke-width .3s ease;
}

.mt-ai__pulse {
    fill: none;
    stroke: #1560d9;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: 10 340;
    stroke-dashoffset: 350;
    opacity: .85;
}

.mt-ai__core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 4px;
    width: 26%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #4d8dff 0%, #1560d9 45%, #5b3fd6 100%);
    box-shadow: 0 0 0 10px rgba(21, 96, 217, .1), 0 22px 44px -14px rgba(21, 96, 217, .7);
    color: #fff;
    transform: translate(-50%, -50%);
}

.mt-ai__core i {
    font-size: clamp(24px, 3vw, 38px);
}

.mt-ai__core span {
    font-size: clamp(9px, .9vw, 12px);
    font-weight: 700;
    letter-spacing: .06em;
}

.mt-ai__core::before,
.mt-ai__core::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid rgba(77, 141, 255, .5);
    border-radius: 50%;
    opacity: 0;
}

.mt-ai__node {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--mt-border);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--mt-shadow);
    color: var(--mt-ink);
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transform: translate(-50%, -50%);
    transition: transform .3s var(--mt-ease), box-shadow .3s ease, border-color .3s ease;
}

.mt-ai__node > span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 12px;
}

.mt-ai__node:hover,
.mt-ai__node:focus-visible {
    border-color: #b9cce3;
    box-shadow: var(--mt-shadow-lg);
    color: var(--mt-ink);
    text-decoration: none;
    transform: translate(-50%, -50%) scale(1.08);
}

.mt-ai__node--erp { left: 17.7%; top: 18.6%; }
.mt-ai__node--hrms { left: 82.3%; top: 18.6%; }
.mt-ai__node--crm { left: 13%; top: 51.8%; }
.mt-ai__node--ecom { left: 85%; top: 51.8%; }
.mt-ai__node--eims { left: 20%; top: 83.2%; }
.mt-ai__node--ams { left: 80%; top: 83.2%; }

/* Light up the wire of the hovered product */
.mt-ai:has(.mt-ai__node--erp:hover) .mt-ai__wire--erp,
.mt-ai:has(.mt-ai__node--hrms:hover) .mt-ai__wire--hrms,
.mt-ai:has(.mt-ai__node--crm:hover) .mt-ai__wire--crm,
.mt-ai:has(.mt-ai__node--ecom:hover) .mt-ai__wire--ecom,
.mt-ai:has(.mt-ai__node--eims:hover) .mt-ai__wire--eims,
.mt-ai:has(.mt-ai__node--ams:hover) .mt-ai__wire--ams {
    stroke: #1560d9;
    stroke-width: 3;
}

@media (prefers-reduced-motion: no-preference) {
    .mt-ai__ring--b { animation: mtSpin 60s linear infinite; }
    .mt-ai__ring--c { animation: mtSpin 90s linear infinite reverse; }

    .mt-ai__pulse { animation: mtAiPulse 3.2s linear infinite; }
    .mt-ai__pulse:nth-child(2) { animation-delay: -.5s; }
    .mt-ai__pulse:nth-child(3) { animation-delay: -1.1s; }
    .mt-ai__pulse:nth-child(4) { animation-delay: -1.6s; }
    .mt-ai__pulse:nth-child(5) { animation-delay: -2.2s; }
    .mt-ai__pulse:nth-child(6) { animation-delay: -2.7s; }

    .mt-ai__core::before { animation: mtAiRing 3s ease-out infinite; }
    .mt-ai__core::after { animation: mtAiRing 3s ease-out 1.5s infinite; }

    .mt-ai__node { animation: mtFloat 7s ease-in-out infinite; }
    .mt-ai__node--hrms,
    .mt-ai__node--eims { animation-delay: -2.3s; }
    .mt-ai__node--crm,
    .mt-ai__node--ams { animation-delay: -4.6s; }
}

@keyframes mtAiPulse {
    to { stroke-dashoffset: 0; }
}

@keyframes mtAiRing {
    0% { opacity: .9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.7); }
}

.mt-ai__chip {
    position: absolute;
    z-index: 3;
    background: #fff;
    box-shadow: var(--mt-shadow-lg);
    color: var(--mt-ink);
}

.mt-ai__chip--loc {
    top: 4px;
    right: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.mt-ai__chip--loc i {
    color: var(--mt-primary-600);
}

.mt-ai__chip--ai {
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px 14px 14px;
    border-radius: 14px;
}

.mt-ai__chip--ai > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, #6d3fe0, #1560d9);
    color: #fff;
    font-size: 17px;
}

.mt-ai__chip--ai strong {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
}

.mt-ai__chip--ai small {
    display: block;
    margin-top: 2px;
    color: var(--mt-muted);
    font-size: 12px;
}

/* ---------- Stats strip (count-up) ----------
   Each number is a CSS counter driven by the registered integer --mt-n.
   It counts from 0 over 2.2s once premium.js's reveal hook marks the list
   `.is-visible` (i.e. when the user reaches the strip). Without that hook
   (or with reduced motion) the final value simply shows.
   "10K+" counts 1K, 2K ... 10K. */
@property --mt-n {
    syntax: '<integer>';
    inherits: false;
    initial-value: 0;
}

.mt-stats2 {
    position: relative;
    overflow: hidden;
    padding: 64px 0;
    background:
        radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 16px 16px,
        radial-gradient(600px 300px at 100% 0%, rgba(41, 110, 230, .55), transparent 60%),
        linear-gradient(120deg, #0b2560 0%, #0d3784 100%);
}

.mt-stats2__net {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.mt-stats2__net path {
    fill: none;
    stroke: rgba(126, 170, 255, .3);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
}

.mt-stats2__net circle {
    fill: #7fb0ff;
}

.mt-stats2 .mt-container {
    position: relative;
}

.mt-stats2__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.mt-stats2__grid li {
    padding: 22px 12px;
    border-radius: 16px;
}

.mt-stats2__grid strong {
    display: block;
    margin-bottom: 12px;
    color: #fff;
    font-family: var(--mt-font-heading);
    font-size: clamp(42px, 4.4vw, 56px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

.mt-stats2__grid li > span {
    color: rgba(255, 255, 255, .8);
    font-size: 16.5px;
    font-weight: 500;
}

.mt-count {
    --mt-n: var(--to);
    counter-reset: mt-n var(--mt-n);
}

.mt-count::after {
    content: counter(mt-n) "+";
}

.mt-count--k::after {
    content: counter(mt-n) "K+";
}

@keyframes mtCount {
    from { --mt-n: 0; }
    to { --mt-n: var(--to); }
}

/* Start at 0 and count up once the strip scrolls into view: premium.js
   adds `.is-visible` when the user reaches it. The ease-out curve makes
   it run fast at first and settle on the real value. */
.mt-reveal-ready .mt-stats2__grid .mt-count {
    --mt-n: 0;
}

.mt-reveal-ready .mt-stats2__grid.is-visible .mt-count {
    animation: mtCount 2.2s cubic-bezier(.22, 1, .36, 1) .3s forwards;
}

/* ---------- Services ---------- */
.mt-svc {
    overflow: hidden;
}

.mt-svc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30px;
    right: 30px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--mt-primary-600);
    transform: scaleX(0);
    transition: transform .3s var(--mt-ease);
}

.mt-svc:hover::before {
    transform: scaleX(1);
}

.mt-svc__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: 30px;
    border-radius: 14px;
    background: var(--mt-accent-soft);
    color: var(--mt-primary-600);
    font-size: 21px;
    transition: background-color .3s ease, color .3s ease;
}

.mt-svc:hover .mt-svc__icon {
    background: var(--mt-primary-600);
    color: #fff;
}

/* ---------- Products ---------- */
.mt-product {
    --hue: #1560d9;
    --hue-soft: rgba(21, 96, 217, .12);
    overflow: hidden;
}

.mt-hue--blue { --hue: #1560d9; --hue-soft: rgba(21, 96, 217, .12); }
.mt-hue--orange { --hue: #f0661c; --hue-soft: rgba(240, 102, 28, .13); }
.mt-hue--green { --hue: #12996b; --hue-soft: rgba(18, 153, 107, .12); }
.mt-hue--purple { --hue: #6d3fe0; --hue-soft: rgba(109, 63, 224, .12); }
.mt-hue--red { --hue: #d9541e; --hue-soft: rgba(217, 84, 30, .13); }
.mt-hue--teal { --hue: #0e7d8c; --hue-soft: rgba(14, 125, 140, .12); }

.mt-product::after {
    content: "";
    position: absolute;
    top: -70px;
    right: -70px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--hue-soft), transparent 70%);
    pointer-events: none;
}

.mt-product:hover {
    border-color: color-mix(in srgb, var(--hue) 35%, #fff);
}

.mt-product__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.mt-product__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--hue);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 10px 20px -10px var(--hue);
}

.mt-product__kicker {
    position: relative;
    z-index: 1;
    color: var(--hue);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.mt-product .mt-link {
    color: var(--hue);
}

.mt-product .mt-link:hover {
    color: var(--hue);
    filter: brightness(.85);
}

/* ---------- Industries ---------- */
.mt-ind {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--mt-border);
    border-radius: 18px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    transition: transform .3s var(--mt-ease), box-shadow .3s ease;
}

.mt-ind:hover,
.mt-ind:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--mt-shadow-lg);
    color: inherit;
    text-decoration: none;
}

/* Image panel: white, with the industry image centred and fully visible.
   The source images are logos on white, so object-fit: contain keeps
   every edge of the artwork in view. */
.mt-ind__art {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    padding: 22px;
    border-bottom: 1px solid var(--mt-border);
    background: #fff;
}

.mt-ind__art img {
    position: absolute;
    inset: 22px;
    display: block;
    width: calc(100% - 44px);
    height: calc(100% - 44px);
    object-fit: contain;
    transition: transform .5s var(--mt-ease);
}

.mt-ind:hover .mt-ind__art img {
    transform: scale(1.05);
}

.mt-ind__body {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
}

.mt-ind__icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: var(--mt-accent-soft);
    color: var(--mt-primary-600);
    font-size: 16px;
}

.mt-ind__text {
    flex: 1;
    min-width: 0;
}

.mt-ind__text strong {
    display: block;
    color: var(--mt-ink);
    font-size: 16.5px;
    font-weight: 700;
}

.mt-ind__text small {
    display: block;
    margin-top: 2px;
    color: var(--mt-muted);
    font-size: 13.5px;
}

.mt-ind__go {
    color: var(--mt-primary-600);
    transition: transform .2s var(--mt-ease);
}

.mt-ind:hover .mt-ind__go {
    transform: translateX(3px);
}

/* ---------- Trusted by (marquee) ---------- */
/* The legacy theme styles `#clients` (white, 75px padding); restate ours. */
#clients.mt-trusted {
    padding: 44px 0 52px;
    border-top: 1px solid var(--mt-border);
    background: #fff;
}

/* Trim the double spacing where two white sections meet */
#about.mt-section { padding-top: 72px; }
#industries.mt-section { padding-bottom: 64px; }

.mt-trusted__label {
    margin: 0 0 26px;
    color: var(--mt-muted);
    font-family: var(--mt-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-align: center;
    text-transform: uppercase;
}

.mt-marquee {
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.mt-marquee__track {
    display: flex;
    flex-shrink: 0;
    gap: 16px;
    margin: 0;
    padding: 0 8px;
    list-style: none;
}

.mt-marquee__track li {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 180px;
    height: 92px;
    padding: 14px 22px;
    border: 1px solid var(--mt-border);
    border-radius: 16px;
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.mt-marquee__track img {
    display: block;
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.mt-marquee__track li:hover {
    border-color: #d3dff1;
    box-shadow: var(--mt-shadow);
}

/* Logos keep their original colours in the centre of the strip and fade to
   grey towards the edges: two overlays apply a greyscale backdrop-filter,
   masked so the effect is strongest at the edges and gone by the middle.
   Browsers without backdrop-filter simply show every logo in colour. */
.mt-marquee {
    position: relative;
}

.mt-marquee::before,
.mt-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 40%;
    pointer-events: none;
    -webkit-backdrop-filter: grayscale(1);
    backdrop-filter: grayscale(1);
}

.mt-marquee::before {
    left: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent);
    mask-image: linear-gradient(90deg, #000 45%, transparent);
}

.mt-marquee::after {
    right: 0;
    -webkit-mask-image: linear-gradient(270deg, #000 45%, transparent);
    mask-image: linear-gradient(270deg, #000 45%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
    .mt-marquee__track {
        animation: mtMarquee 48s linear infinite;
    }

    .mt-marquee:hover .mt-marquee__track {
        animation-play-state: paused;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mt-marquee {
        flex-wrap: wrap;
        justify-content: center;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .mt-marquee__track {
        flex-wrap: wrap;
        justify-content: center;
    }

    .mt-marquee__track[aria-hidden="true"] {
        display: none;
    }
}

@keyframes mtMarquee {
    to { transform: translateX(-100%); }
}

/* ---------- Why MenThee ---------- */
.mt-why2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.mt-why2 .mt-lead {
    margin-bottom: 34px;
}

.mt-why2__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
}

.mt-why2__grid li {
    display: flex;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--mt-border);
    border-radius: 14px;
    background: #fff;
    transition: box-shadow .25s ease, border-color .25s ease;
}

.mt-why2__grid li:hover {
    border-color: #d3dff1;
    box-shadow: var(--mt-shadow);
}

.mt-why2__grid h3 {
    margin: 0 0 4px;
    color: var(--mt-ink);
    font-size: 16px;
    font-weight: 700;
}

.mt-why2__grid p {
    margin: 0;
    color: var(--mt-text);
    font-size: 14px;
    line-height: 1.6;
}

.mt-why2__visual {
    position: relative;
    padding: 0 0 36px 30px;
}

.mt-why2__panel {
    border-radius: 24px;
    background:
        radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px) 0 0 / 16px 16px,
        radial-gradient(500px 320px at 50% 40%, rgba(41, 110, 230, .5), transparent 70%),
        linear-gradient(160deg, #0c2a66 0%, #0a2257 100%);
    box-shadow: var(--mt-shadow-lg);
    overflow: hidden;
}

.mt-why2__panel svg {
    display: block;
    width: 100%;
    height: auto;
}

.mt-why2__net path {
    fill: none;
    stroke: rgba(126, 170, 255, .45);
    stroke-width: 1.4;
}

.mt-why2__nodes circle {
    fill: #7fb0ff;
}

.mt-why2__badge {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 280px;
    padding: 18px 20px;
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--mt-shadow-lg);
}

.mt-why2__badge-icon {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: #12996b;
    color: #fff;
    font-size: 20px;
}

.mt-why2__badge strong {
    display: block;
    color: var(--mt-ink);
    font-size: 15px;
    font-weight: 700;
}

.mt-why2__badge span:not(.mt-why2__badge-icon) {
    display: block;
    margin-top: 4px;
    color: var(--mt-text);
    font-size: 13px;
    line-height: 1.5;
}

/* ---------- Testimonials (CSS-only carousel) ----------
   Autoplay: the track moves one review at a time (paused on hover/focus).
   The first three reviews are repeated at the end, so the loop is seamless.
   Manual: the radios hold a position; choosing any review other than the
   first stops the autoplay, and coming back to the first resumes it. */
.mt-tcar {
    position: relative;
    padding: 0 72px;
}

.mt-tcar__radio {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    opacity: 0;
}

.mt-tcar__viewport {
    overflow: hidden;
    padding: 10px 4px 24px;
    margin: -10px -4px 0;
}

.mt-tcar__track {
    --gap: 24px;
    --visible: 3;
    --pos: 0;
    display: flex;
    gap: var(--gap);
    transform: translateX(calc(var(--pos) * (100% + var(--gap)) / var(--visible) * -1));
    transition: transform .55s var(--mt-ease);
}

#mt-tcar-2:checked ~ .mt-tcar__viewport .mt-tcar__track { --pos: 1; }
#mt-tcar-3:checked ~ .mt-tcar__viewport .mt-tcar__track { --pos: 2; }
#mt-tcar-4:checked ~ .mt-tcar__viewport .mt-tcar__track { --pos: 3; }
#mt-tcar-5:checked ~ .mt-tcar__viewport .mt-tcar__track { --pos: 4; }

@media (prefers-reduced-motion: no-preference) {
    .mt-tcar__track {
        animation: mtTcarAuto 25s ease-in-out infinite;
    }

    .mt-tcar__dots label {
        animation: mtTcarDot 25s ease-in-out infinite;
    }

    .mt-tcar__dots label:nth-child(2) { animation-delay: -20s; }
    .mt-tcar__dots label:nth-child(3) { animation-delay: -15s; }
    .mt-tcar__dots label:nth-child(4) { animation-delay: -10s; }
    .mt-tcar__dots label:nth-child(5) { animation-delay: -5s; }

    .mt-tcar:focus-within .mt-tcar__track,
    .mt-tcar:focus-within .mt-tcar__dots label {
        animation-play-state: paused;
    }

    /* Manual control takes over */
    .mt-tcar__radio:not(#mt-tcar-1):checked ~ .mt-tcar__viewport .mt-tcar__track,
    .mt-tcar__radio:not(#mt-tcar-1):checked ~ .mt-tcar__dots label {
        animation: none;
    }
}

/* 5 steps of 5s: hold ~4.4s, then move 0.6s. Step 5 shows the repeated
   first reviews, identical to step 0, so the jump back is invisible. */
@keyframes mtTcarAuto {
    0%, 17.6% { transform: translateX(0); }
    20%, 37.6% { transform: translateX(calc(1 * (100% + var(--gap)) / var(--visible) * -1)); }
    40%, 57.6% { transform: translateX(calc(2 * (100% + var(--gap)) / var(--visible) * -1)); }
    60%, 77.6% { transform: translateX(calc(3 * (100% + var(--gap)) / var(--visible) * -1)); }
    80%, 97.6% { transform: translateX(calc(4 * (100% + var(--gap)) / var(--visible) * -1)); }
    100% { transform: translateX(calc(5 * (100% + var(--gap)) / var(--visible) * -1)); }
}

@keyframes mtTcarDot {
    0%, 17.6%, 100% { width: 28px; background: var(--mt-primary-600); }
    20%, 97.6% { width: 8px; background: #c9d6ea; }
}

.mt-quote {
    display: flex;
    flex: 0 0 calc((100% - (var(--visible) - 1) * var(--gap)) / var(--visible));
    flex-direction: column;
    margin: 0;
    padding: 30px 30px 26px;
    border: 1px solid var(--mt-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 30px -22px rgba(13, 42, 92, .35);
}

.mt-stars {
    display: flex;
    gap: 3px;
    margin-bottom: 18px;
    color: #f5a623;
    font-size: 15px;
}

.mt-quote blockquote {
    flex: 1;
    margin: 0 0 22px;
    padding: 0;
    border: 0;
    color: var(--mt-ink);
    font-size: 15.5px;
    line-height: 1.75;
}

.mt-quote figcaption {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid var(--mt-border);
}

.mt-avatar {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--mt-accent-soft);
    color: var(--mt-primary-600);
    font-size: 15px;
    font-weight: 800;
}

.mt-quote cite {
    display: block;
    color: var(--mt-ink);
    font-size: 15.5px;
    font-style: normal;
    font-weight: 700;
}

.mt-quote figcaption span:not(.mt-avatar) {
    display: block;
    margin-top: 2px;
    color: var(--mt-muted);
    font-size: 13.5px;
}

.mt-tcar__prev,
.mt-tcar__next {
    position: absolute;
    top: calc(50% - 40px);
    display: none;
    place-items: center;
    width: 48px;
    height: 48px;
    border: 1px solid var(--mt-border);
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--mt-shadow);
    color: var(--mt-primary-600);
    font-size: 14px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.mt-tcar__prev { left: 0; }
.mt-tcar__next { right: 0; }

.mt-tcar__prev:hover,
.mt-tcar__next:hover {
    border-color: var(--mt-primary-600);
    background: var(--mt-primary-600);
    color: #fff;
}

#mt-tcar-1:checked ~ .mt-tcar__arrows .mt-tcar__prev--1,
#mt-tcar-2:checked ~ .mt-tcar__arrows .mt-tcar__prev--2,
#mt-tcar-3:checked ~ .mt-tcar__arrows .mt-tcar__prev--3,
#mt-tcar-4:checked ~ .mt-tcar__arrows .mt-tcar__prev--4,
#mt-tcar-5:checked ~ .mt-tcar__arrows .mt-tcar__prev--5,
#mt-tcar-1:checked ~ .mt-tcar__arrows .mt-tcar__next--1,
#mt-tcar-2:checked ~ .mt-tcar__arrows .mt-tcar__next--2,
#mt-tcar-3:checked ~ .mt-tcar__arrows .mt-tcar__next--3,
#mt-tcar-4:checked ~ .mt-tcar__arrows .mt-tcar__next--4,
#mt-tcar-5:checked ~ .mt-tcar__arrows .mt-tcar__next--5 {
    display: grid;
}

.mt-tcar__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}

.mt-tcar__dots label {
    width: 8px;
    height: 8px;
    margin: 0;
    border-radius: 999px;
    background: #c9d6ea;
    cursor: pointer;
    transition: width .3s var(--mt-ease), background-color .3s ease;
}

#mt-tcar-1:checked ~ .mt-tcar__dots label:nth-child(1),
#mt-tcar-2:checked ~ .mt-tcar__dots label:nth-child(2),
#mt-tcar-3:checked ~ .mt-tcar__dots label:nth-child(3),
#mt-tcar-4:checked ~ .mt-tcar__dots label:nth-child(4),
#mt-tcar-5:checked ~ .mt-tcar__dots label:nth-child(5) {
    width: 28px;
    background: var(--mt-primary-600);
}

.mt-tcar__radio:focus-visible ~ .mt-tcar__dots {
    outline: 3px solid rgba(21, 96, 217, .45);
    outline-offset: 6px;
    border-radius: 999px;
}

/* A soft lift on the stats tiles too, so every block responds to hover */
.mt-stats2__grid li {
    transition: background-color .3s ease, transform .3s var(--mt-ease);
}

.mt-stats2__grid li:hover {
    background: rgba(255, 255, 255, .06);
    transform: translateY(-3px);
}

.mt-features li {
    margin: -10px;
    padding: 10px;
    border-radius: 14px;
    transition: background-color .3s ease;
}

.mt-features li:hover {
    background: rgba(234, 242, 254, .5);
}

/* ---------- Staggered reveal for rows of cards ---------- */
.mt-reveal-ready .mt-grid > [data-reveal]:nth-child(2) { transition-delay: .08s; }
.mt-reveal-ready .mt-grid > [data-reveal]:nth-child(3) { transition-delay: .16s; }
.mt-reveal-ready .mt-grid > [data-reveal]:nth-child(4) { transition-delay: .24s; }
.mt-reveal-ready .mt-grid > [data-reveal]:nth-child(5) { transition-delay: .12s; }
.mt-reveal-ready .mt-grid > [data-reveal]:nth-child(6) { transition-delay: .2s; }

/* Once revealed, hover effects should react without that delay */
.mt-reveal-ready .mt-grid > [data-reveal].is-visible:hover {
    transition-delay: 0s;
}

/* ---------- CTA band ---------- */
.mt-section.mt-cta-wrap {
    padding: 72px 0;
}

.mt-cta {
    position: relative;
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 32px;
    align-items: center;
    padding: 64px 72px;
    border-radius: 24px;
    background:
        radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) 0 0 / 16px 16px,
        radial-gradient(600px 320px at 100% 0%, rgba(41, 110, 230, .55), transparent 60%),
        linear-gradient(120deg, #0b2560 0%, #0d3784 100%);
    color: #fff;
    overflow: hidden;
}

.mt-cta__net {
    position: absolute;
    right: 0;
    top: 0;
    width: 60%;
    height: 100%;
    pointer-events: none;
}

.mt-cta__net path {
    fill: none;
    stroke: rgba(126, 170, 255, .35);
    stroke-width: 1.2;
}

.mt-cta__net circle {
    fill: #7fb0ff;
}

.mt-cta__copy,
.mt-cta__actions {
    position: relative;
}

.mt-cta h2 {
    margin: 0 0 16px;
    color: #fff;
    font-size: clamp(28px, 3.2vw, 44px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
}

.mt-cta p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 17px;
    line-height: 1.7;
}

.mt-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 14px;
}

/* ---------- Back to top ---------- */
.mt-totop {
    position: fixed;
    right: 26px;
    bottom: 96px;
    z-index: 9990;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--mt-primary-600);
    box-shadow: 0 12px 24px -10px rgba(21, 96, 217, .7);
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s var(--mt-ease);
}

.mt-totop:hover,
.mt-totop:focus-visible {
    background: var(--mt-primary-700);
    color: #fff;
    transform: translateY(-2px);
}

/* Image lightbox */
.mt-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(7, 19, 38, .86);
}

.mt-lightbox.is-open {
    display: flex;
    animation: mtFade .2s ease;
}

.mt-lightbox img {
    max-width: min(920px, 100%);
    max-height: 86vh;
    border-radius: 12px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}

.mt-lightbox button {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--mt-ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

@keyframes mtFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ---------- Contact ---------- */
.mt-contact {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 32px;
    align-items: stretch; /* both columns share the taller one's height */
}

.mt-contact__info {
    padding: 34px;
    border-radius: var(--mt-radius-lg);
    background: linear-gradient(160deg, #0d3466 0%, #0a2a55 100%);
    color: #fff;
}

.mt-contact__info h3 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.mt-contact__info > p {
    margin: 0 0 26px;
    color: rgba(255, 255, 255, .8);
    font-size: 15px;
    line-height: 1.7;
}

.mt-contact__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mt-contact__list li {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.mt-contact__list i {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
    color: #8fd0ff;
    font-size: 15px;
}

.mt-contact__list small {
    display: block;
    margin-bottom: 2px;
    color: rgba(255, 255, 255, .6);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.mt-contact__list a,
.mt-contact__list span {
    color: #fff;
    font-size: 15px;
    line-height: 1.55;
    text-decoration: none;
}

.mt-contact__list a:hover {
    color: #8fd0ff;
}

.mt-form {
    padding: 34px;
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius-lg);
    background: #fff;
    box-shadow: var(--mt-shadow);
}

.mt-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.mt-field {
    margin-bottom: 18px;
}

.mt-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--mt-ink);
    font-size: 14px;
    font-weight: 600;
}

.mt-field label .mt-req {
    color: var(--mt-danger);
}

.mt-field input,
.mt-field select,
.mt-field textarea {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid var(--mt-border);
    border-radius: 10px;
    background: #fbfcfe;
    color: var(--mt-ink);
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.mt-field textarea {
    min-height: 130px;
    resize: vertical;
}

.mt-field select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2342536a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}

.mt-field input:focus,
.mt-field select:focus,
.mt-field textarea:focus {
    outline: none;
    border-color: var(--mt-accent);
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(27, 137, 211, .14);
}

.mt-field.is-invalid input,
.mt-field.is-invalid select,
.mt-field.is-invalid textarea {
    border-color: var(--mt-danger);
}

.mt-field.is-valid input {
    border-color: #9fd3bd;
}

.mt-field__error {
    display: none;
    margin-top: 6px;
    color: var(--mt-danger);
    font-size: 13px;
}

.mt-field.is-invalid .mt-field__error {
    display: block;
}

.mt-field .cf-verify-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

.mt-field .cf-verify-status {
    color: var(--mt-muted);
    font-size: 12.5px;
}

.mt-field .cf-verify-success {
    color: var(--mt-success);
    font-size: 12.5px;
    font-weight: 700;
}

.mt-field .cf-verify-btn {
    min-height: 32px;
    padding: 0 14px;
    border: 1.5px solid var(--mt-primary-600);
    border-radius: 999px;
    background: #fff;
    color: var(--mt-primary-600);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.mt-field .cf-verify-btn:hover:not(:disabled) {
    background: var(--mt-primary-600);
    color: #fff;
}

.mt-field .cf-verify-btn:disabled {
    border-color: var(--mt-border);
    color: var(--mt-muted);
    cursor: not-allowed;
}

.mt-form__submit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
}

.mt-form__submit .mt-btn {
    min-width: 190px;
}

.mt-form__submit .mt-btn:disabled {
    background: #9db6d3;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.mt-form__hint {
    color: var(--mt-muted);
    font-size: 13px;
    line-height: 1.5;
}

.mt-spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2.5px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mtSpin .8s linear infinite;
}

.mt-btn.is-loading .mt-spinner {
    display: inline-block;
}

@keyframes mtSpin {
    to { transform: rotate(360deg); }
}

.mt-alert {
    display: none;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: 10px;
    font-size: 14.5px;
    line-height: 1.55;
}

.mt-alert.is-shown {
    display: flex;
}

.mt-alert--success {
    border: 1px solid #b7e2cd;
    background: #effaf4;
    color: #0c6b4a;
}

.mt-alert--error {
    border: 1px solid #f1c4bf;
    background: #fdf2f1;
    color: #9b2c22;
}

.mt-form__privacy {
    margin: 16px 0 0;
    color: var(--mt-muted);
    font-size: 12.5px;
}

.mt-form__privacy a {
    color: var(--mt-primary-600);
}

/* OTP modal (logic unchanged; restyled) */
.cf-otp-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(7, 19, 38, .6);
}

.cf-otp-box {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 32px 28px;
    border-radius: var(--mt-radius-lg);
    background: #fff;
    text-align: center;
    box-shadow: var(--mt-shadow-lg);
}

.cf-otp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--mt-surface);
    color: var(--mt-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.cf-otp-box h4 {
    margin: 0 0 8px;
    color: var(--mt-ink);
    font-size: 20px;
    font-weight: 700;
}

.cf-otp-box p {
    margin: 0 0 4px;
    color: var(--mt-text);
    font-size: 14px;
}

.cf-otp-target {
    margin-bottom: 18px !important;
    color: var(--mt-primary-600) !important;
    font-weight: 600;
    word-break: break-all;
}

.cf-otp-inputs {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 14px;
}

.cf-otp-input {
    width: 44px;
    height: 52px;
    border: 1.5px solid var(--mt-border);
    border-radius: 10px;
    background: #fbfcfe;
    color: var(--mt-ink);
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}

.cf-otp-input:focus {
    outline: none;
    border-color: var(--mt-accent);
    box-shadow: 0 0 0 4px rgba(27, 137, 211, .14);
}

.cf-otp-input.success {
    border-color: var(--mt-success);
    background: #effaf4;
    color: var(--mt-success);
}

.cf-otp-input.shake {
    border-color: var(--mt-danger);
    animation: cfShake .4s ease-in-out;
}

@keyframes cfShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

.cf-otp-msg {
    min-height: 18px;
    margin-bottom: 8px;
    font-size: 13.5px;
}

.cf-otp-msg.error { color: var(--mt-danger); }
.cf-otp-msg.success { color: var(--mt-success); }

.cf-otp-timer {
    margin-bottom: 18px;
    color: var(--mt-muted);
    font-size: 13px;
}

.cf-otp-actions {
    display: flex;
    gap: 10px;
}

.cf-resend-btn,
.cf-verify-otp-btn {
    flex: 1;
    min-height: 46px;
    border: 0;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}

.cf-resend-btn {
    background: var(--mt-surface);
    color: var(--mt-text);
}

.cf-resend-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.cf-verify-otp-btn {
    background: var(--mt-primary-600);
    color: #fff;
}

.cf-verify-otp-btn:hover {
    background: var(--mt-primary-700);
}


/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .mt-nav-actions { display: none; }
    .mt-topbar__link:first-child { display: none; }
    .mt-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .mt-hero__grid { grid-template-columns: 1fr 1fr; }
    .mt-hero__visual { height: 560px; }
    .mt-chip--crm { left: -2%; }
    .mt-chip--ecom { right: -2%; }
    .mt-stats2__grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
    .mt-cta { padding: 52px 48px; }
}

@media (max-width: 992px) {
    .mt-section { padding: 72px 0; }
    .mt-hero { padding-top: calc(56px + var(--mt-header-h)); }
    .mt-hero__grid,
    .mt-about,
    .mt-why2,
    .mt-contact,
    .mt-cta { grid-template-columns: 1fr; }
    .mt-hero__grid { gap: 24px; }
    .mt-hero__visual { width: 100%; max-width: 620px; margin: 0 auto; }
    .mt-highlights { grid-template-columns: repeat(2, 1fr); }
    .mt-highlights li:nth-child(3) { border-left: 0; }
    .mt-highlights li:nth-child(n+3) { border-top: 1px solid var(--mt-border); }
    .mt-about,
    .mt-why2 { gap: 56px; }
    .mt-ai { max-width: 620px; }
    .mt-why2__visual { max-width: 620px; }
    .mt-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .mt-head--split { flex-direction: column; align-items: flex-start; }
    .mt-cta__actions { justify-content: flex-start; }

    .mt-tcar__track { --visible: 2; }
}

@media (max-width: 768px) {
    .mt-topbar .demo-message { display: none; }
    .mt-topbar__inner { justify-content: center; }
    .mt-topbar__links { gap: 16px; }
}

@media (max-width: 680px) {
    .mt-container { padding: 0 16px; }
    .mt-section { padding: 56px 0; }
    .mt-head { margin-bottom: 36px; }
    .mt-lead { font-size: 16.5px; }
    .mt-hero h1 { font-size: 44px; }
    .mt-hero__lead { font-size: 16.5px; }
    .mt-hero__actions .mt-btn { flex: 1 1 100%; }
    .mt-hero__meta { gap: 10px 18px; }
    .mt-hero__visual { height: 560px; }
    .mt-board { transform: translate(-50%, -50%); }
    .mt-orbit { width: 470px; height: 470px; }
    .mt-board { width: min(320px, 92%); }
    .mt-chip { padding: 8px 12px 8px 8px; font-size: 12px; }
    .mt-chip small { display: none; }
    .mt-chip__icon { width: 30px; height: 30px; font-size: 13px; }
    .mt-chip--erp { left: 0; top: 2%; }
    .mt-chip--hrms { right: 0; top: 2%; }
    .mt-chip--crm,
    .mt-chip--ecom { display: none; }
    .mt-chip--erp,
    .mt-chip--hrms { top: 0; }
    .mt-chip--eims { left: 0; bottom: 52px; }
    .mt-chip--ams { right: 0; bottom: 52px; }
    .mt-chip--ai { left: 50%; bottom: 0; }
    .mt-highlights { grid-template-columns: 1fr; margin-top: 32px; }
    .mt-highlights li { border-left: 0; padding: 18px 20px; }
    .mt-highlights li + li { border-top: 1px solid var(--mt-border); }
    .mt-grid--2,
    .mt-grid--3,
    .mt-grid--4 { grid-template-columns: 1fr; }
    .mt-card { padding: 24px; }
    .mt-ai { padding: 24px 0 64px; }
    .mt-ai__chip--loc { right: 12px; }
    .mt-ai__chip--ai { left: 12px; }
    .mt-ai__node { gap: 0; padding: 5px; }
    .mt-ai__node > span { width: 30px; height: 30px; }
    .mt-ai__node { font-size: 0; }
    .mt-stats2 { padding: 48px 0; }
    .mt-stats2__grid strong { font-size: 40px; }
    #about.mt-section { padding-top: 48px; }
    #industries.mt-section { padding-bottom: 40px; }
    .mt-section.mt-cta-wrap { padding: 48px 0; }
    #clients.mt-trusted { padding: 36px 0 44px; }
    .mt-why2__grid { grid-template-columns: 1fr; }
    .mt-why2__visual { padding: 0 0 56px; }
    .mt-why2__badge { left: 12px; }
    .mt-marquee__track li { width: 140px; height: 76px; padding: 12px 16px; }
    .mt-marquee__track img { max-height: 44px; }
    .mt-tcar { padding: 0; }
    .mt-tcar__track { --visible: 1; --gap: 16px; }
    .mt-tcar__prev,
    .mt-tcar__next { top: auto; bottom: -6px; width: 42px; height: 42px; }
    .mt-tcar__dots { min-height: 42px; align-items: center; margin-top: 8px; }
    .mt-quote { padding: 24px 22px 22px; }
    .mt-cta { padding: 40px 24px; border-radius: 20px; }
    .mt-cta__actions .mt-btn { flex: 1 1 100%; }
    .mt-contact__info,
    .mt-form { padding: 24px 20px; }
    .mt-form__row { grid-template-columns: 1fr; gap: 0; }
    .mt-form__submit .mt-btn { width: 100%; }
    .mt-totop { right: 20px; bottom: 92px; width: 44px; height: 44px; }
}