/* =========================================================
   MON AI LANDING PAGE - MONSTER DESIGN LIGHT THEME
   Scoped only inside #mon-ai-landing
   ========================================================= */

#mon-ai-landing {
    --mon-primary: #ef4b3f;
    --mon-orange: #f59a2f;
    --mon-blue: #4267f5;
    --mon-green: #35b96f;

    --mon-text: #20232a;
    --mon-heading: #17191f;
    --mon-muted: #69707d;

    --mon-bg: #ffffff;
    --mon-soft: #f7f8fa;
    --mon-soft2: #f2f4f7;
    --mon-card: #ffffff;

    --mon-border: #e5e8ee;
    --mon-shadow: 0 20px 55px rgba(25, 35, 55, .08);

    position: relative;
    width: 100%;
    overflow: hidden;

    background: #fff;
    color: var(--mon-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}

#mon-ai-landing *,
#mon-ai-landing *:before,
#mon-ai-landing *:after {
    box-sizing: border-box;
}


/* =========================================================
   GLOBAL
   ========================================================= */

#mon-ai-landing h1,
#mon-ai-landing h2,
#mon-ai-landing h3,
#mon-ai-landing h4,
#mon-ai-landing h5 {
    color: var(--mon-heading);
}

#mon-ai-landing p {
    color: var(--mon-muted);
}

.mon-container {
    position: relative;
    z-index: 3;

    width: 1180px;
    max-width: calc(100% - 40px);

    margin: 0 auto;
}

.mon-narrow {
    width: 880px;
}

.mon-center {
    text-align: center;
}

.mon-section {
    position: relative;
    padding: 95px 0;
}

.mon-dark-section,
.mon-soft-section {
    background: #fff;
}

/* xen kẽ section nhẹ */
.mon-soft-section {
    background: var(--mon-soft);
}


/* =========================================================
   HERO
   ========================================================= */

.mon-hero {
    position: relative;

    min-height: 780px;

    padding-top: 95px;
    padding-bottom: 160px;

    background:
        radial-gradient(
            circle at 18% 22%,
            rgba(245,154,47,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 82% 28%,
            rgba(66,103,245,.06),
            transparent 30%
        ),
        #ffffff;
}


/* grid cực nhẹ */

.mon-grid-bg {
    position: absolute;
    inset: 0;

    opacity: .38;

    background-image:
        linear-gradient(
            rgba(50,60,80,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(50,60,80,.035) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 80%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 80%
        );
}


/* Glow chỉ làm hiệu ứng nền nhẹ */

.mon-orb {
    position: absolute;
    border-radius: 50%;

    filter: blur(80px);

    opacity: .45;

    pointer-events: none;
}

.mon-orb-1 {
    width: 320px;
    height: 320px;

    left: 5%;
    top: 70px;

    background: rgba(245,154,47,.12);

    animation: monFloat 9s ease-in-out infinite;
}

.mon-orb-2 {
    width: 320px;
    height: 320px;

    right: 5%;
    top: 250px;

    background: rgba(66,103,245,.08);

    animation: monFloat 11s ease-in-out infinite reverse;
}

.mon-orb-3 {
    width: 420px;
    height: 420px;

    left: 50%;
    top: 20px;

    transform: translateX(-50%);

    background: rgba(239,75,63,.08);
}


@keyframes monFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(25px);
    }
}


/* =========================================================
   BADGE
   ========================================================= */

.mon-badge,
.mon-eyebrow {
    display: inline-block;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1.7px;
    text-transform: uppercase;

    color: var(--mon-primary);
}

.mon-badge {
    padding: 9px 17px;

    border: 1px solid rgba(239,75,63,.18);
    border-radius: 50px;

    background: rgba(239,75,63,.045);
}


/* =========================================================
   HERO TYPOGRAPHY
   ========================================================= */

.mon-hero-title {
    max-width: 1000px;

    margin: 25px auto 20px;

    font-size: 58px;
    line-height: 1.08;

    font-weight: 800;

    letter-spacing: -2px;
}

.mon-hero-title span {
    display: block;

    margin-top: 5px;

    background:
        linear-gradient(
            90deg,
            #ef4b3f,
            #f59a2f
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    background-clip: text;
}

.mon-hero-desc {
    max-width: 790px;

    margin: 0 auto;

    color: var(--mon-muted) !important;

    font-size: 18px;
    line-height: 1.75;
}


/* =========================================================
   BUTTON
   ========================================================= */

.mon-actions {
    margin-top: 32px;
}

.mon-btn {
    position: relative;

    display: inline-block;

    margin: 5px;
    padding: 14px 25px;

    border-radius: 5px;

    font-size: 13px;
    font-weight: 700;

    text-decoration: none !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

.mon-btn:hover {
    transform: translateY(-3px);
}

.mon-btn-primary {
    color: #fff !important;

    background:
        linear-gradient(
            90deg,
            var(--mon-primary),
            var(--mon-orange)
        );

    box-shadow:
        0 10px 30px rgba(239,75,63,.18);
}

.mon-btn-primary:hover {
    color: #fff !important;

    box-shadow:
        0 15px 35px rgba(239,75,63,.25);
}

.mon-btn-outline {
    color: #363b45 !important;

    border: 1px solid #d9dde5;

    background: #fff;
}

.mon-btn-outline:hover {
    border-color: #bec4ce;

    color: var(--mon-primary) !important;
}


/* =========================================================
   MINI PROOF
   ========================================================= */

.mon-mini-proof {
    display: flex;

    flex-wrap: wrap;
    justify-content: center;

    gap: 22px;

    margin-top: 25px;

    color: #747b87;

    font-size: 11px;
}


/* =========================================================
   DASHBOARD
   ========================================================= */

.mon-dashboard-wrap {
    width: 930px;
    max-width: 100%;

    margin: 65px auto -140px;

    perspective: 1500px;
}

.mon-dashboard {
    overflow: hidden;

    border: 1px solid #dde1e8;
    border-radius: 9px;

    background: #fff;

    box-shadow:
        0 35px 80px rgba(28,37,55,.13);

    transform: rotateX(1deg);
}

.mon-window-bar {
    display: flex;
    align-items: center;

    height: 45px;

    padding: 0 17px;

    border-bottom: 1px solid #e5e8ee;

    background: #fafbfc;

    color: #7b818b;

    font-size: 11px;
}

.mon-dots {
    display: flex;

    gap: 6px;

    margin-right: 18px;
}

.mon-dots i {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #ccd1d9;
}

.mon-dots i:nth-child(1) {
    background: #ee665c;
}

.mon-dots i:nth-child(2) {
    background: #f3b647;
}

.mon-dots i:nth-child(3) {
    background: #58be73;
}

.mon-dashboard-body {
    display: flex;

    min-height: 400px;
}


/* sidebar */

.mon-sidebar {
    width: 210px;

    padding: 25px 15px;

    border-right: 1px solid #e7e9ee;

    background: #f8f9fb;

    text-align: left;
}

.mon-logo-ai {
    margin: 0 8px 25px;

    color: var(--mon-heading);

    font-size: 18px;
    font-weight: 800;
}

.mon-side-item {
    padding: 11px;

    margin-bottom: 5px;

    border-radius: 5px;

    color: #757b86;

    font-size: 11px;
}

.mon-side-item.active {
    color: var(--mon-primary);

    background: rgba(239,75,63,.07);

    font-weight: 700;
}


/* main panel */

.mon-main-panel {
    flex: 1;

    padding: 30px;

    background: #fff;

    text-align: left;
}

.mon-panel-head {
    display: flex;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;
}

.mon-small-label {
    display: block;

    margin-bottom: 7px;

    color: #8a9099;

    font-size: 9px;

    letter-spacing: 1.3px;
}

.mon-panel-head strong {
    color: #23262c;

    font-size: 17px;
}

.mon-score {
    min-width: 90px;

    text-align: right;
}

.mon-score span {
    display: block;

    color: #8e949d;

    font-size: 9px;
}

.mon-score b {
    color: var(--mon-green);

    font-size: 29px;
}


/* =========================================================
   PROCESS
   ========================================================= */

.mon-process-row {
    display: flex;
    justify-content: space-between;

    margin: 16px 0 7px;

    color: #555c68;

    font-size: 11px;
}

.mon-process-row strong {
    font-size: 9px;
}

.mon-process-row .done {
    color: var(--mon-green);
}

.mon-process-row .working {
    color: var(--mon-blue);
}

.mon-process-row .ready {
    color: var(--mon-primary);
}

.mon-progress {
    overflow: hidden;

    width: 100%;
    height: 4px;

    border-radius: 20px;

    background: #eceef2;
}

.mon-progress i {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            var(--mon-primary),
            var(--mon-orange)
        );
}

.mon-progress.animated i {
    width: 55%;

    background:
        linear-gradient(
            90deg,
            var(--mon-blue),
            #66c7ff
        );

    animation: monProgress 3s ease-in-out infinite;
}


@keyframes monProgress {

    0% {
        width: 15%;
    }

    50% {
        width: 85%;
    }

    100% {
        width: 15%;
    }
}


/* fake article */

.mon-ai-writing {
    margin-top: 28px;

    padding: 18px;

    border: 1px solid #e5e8ee;
    border-radius: 6px;

    background: #fafbfc;
}

.mon-ai-writing span {
    display: block;

    height: 6px;

    margin-bottom: 9px;

    border-radius: 20px;

    background: #dfe3e9;
}

.mon-ai-writing span:nth-child(1) {
    width: 95%;
}

.mon-ai-writing span:nth-child(2) {
    width: 80%;
}

.mon-ai-writing span:nth-child(3) {
    width: 88%;
}

.mon-ai-writing span:nth-child(4) {
    width: 55%;
}


/* =========================================================
   HEADINGS
   ========================================================= */

.mon-heading {
    max-width: 820px;

    margin: 0 auto 55px;
}

.mon-dark-section:first-of-type {
    padding-top: 210px;
}

.mon-heading h2,
.mon-statement h2,
.mon-cta h2 {
    margin: 13px 0 18px;

    color: var(--mon-heading);

    font-size: 40px;
    line-height: 1.16;

    font-weight: 800;

    letter-spacing: -1px;
}

.mon-heading h2 span,
.mon-statement h2 span,
.mon-cta h2 span {
    display: block;

    color: var(--mon-primary);

    background: none;

    -webkit-text-fill-color: initial;
}

.mon-heading p {
    color: var(--mon-muted) !important;

    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   FEATURE BIG CARDS
   ========================================================= */

.mon-feature {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    align-items: center;

    min-height: 410px;

    margin: 22px 0;

    overflow: hidden;

    border: 1px solid var(--mon-border);
    border-radius: 8px;

    background: #fff;

    box-shadow:
        0 8px 35px rgba(25,35,55,.045);
}

.mon-feature-reverse {
    grid-template-columns: 1.1fr .9fr;
}

.mon-feature-reverse .mon-feature-content {
    order: 2;
}

.mon-feature-reverse .mon-feature-ui {
    order: 1;
}

.mon-feature-content {
    position: relative;

    padding: 48px;
}

.mon-number {
    position: absolute;

    right: 27px;
    top: 13px;

    color: #f1f2f5;

    font-size: 70px;
    font-weight: 900;
}

.mon-feature-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 21px;

    border-radius: 6px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            var(--mon-primary),
            var(--mon-orange)
        );

    box-shadow:
        0 8px 20px rgba(239,75,63,.15);
}

.mon-feature-content h3 {
    margin: 0 0 14px;

    color: #25282e;

    font-size: 25px;
    font-weight: 700;
}

.mon-feature-content p {
    color: var(--mon-muted) !important;

    line-height: 1.7;
}

.mon-feature-content ul {
    margin: 22px 0 0;
    padding: 0;

    list-style: none;
}

.mon-feature-content li {
    margin: 9px 0;

    color: #525863;

    font-size: 12px;
}

.mon-feature-content li:before {
    content: "✓";

    margin-right: 9px;

    color: var(--mon-green);

    font-weight: 700;
}


/* =========================================================
   FEATURE UI SIDE
   ========================================================= */

.mon-feature-ui {
    display: flex;

    align-items: center;
    justify-content: center;

    min-height: 410px;

    padding: 42px;

    border-left: 1px solid #edf0f3;

    background:
        linear-gradient(
            135deg,
            #fafbfc,
            #f5f7fa
        );
}

.mon-feature-reverse .mon-feature-ui {
    border-right: 1px solid #edf0f3;
    border-left: 0;
}


/* =========================================================
   KEYWORD BOX
   ========================================================= */

.mon-keyword-box,
.mon-editor-demo,
.mon-gauge-card {
    width: 100%;

    padding: 25px;

    border: 1px solid #dde2e9;
    border-radius: 7px;

    background: #fff;

    box-shadow:
        0 20px 45px rgba(25,35,55,.08);
}

.mon-keyword-box > span {
    color: #8a909b;

    font-size: 9px;

    text-transform: uppercase;
}

.mon-keyword-box h4 {
    margin-top: 9px;

    color: #282c33;

    font-size: 17px;
}

.mon-kpi-row {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 8px;

    margin: 22px 0;
}

.mon-kpi-row div {
    padding: 12px;

    border: 1px solid #eceef2;
    border-radius: 5px;

    background: #fafbfc;
}

.mon-kpi-row small {
    display: block;

    color: #8a9099;

    font-size: 8px;
}

.mon-kpi-row b {
    display: block;

    margin-top: 6px;

    color: #363b44;

    font-size: 11px;
}

.mon-keywords {
    display: flex;

    flex-wrap: wrap;

    gap: 6px;
}

.mon-keywords span {
    padding: 6px 9px;

    border: 1px solid rgba(239,75,63,.12);
    border-radius: 4px;

    background: rgba(239,75,63,.045);

    color: var(--mon-primary);

    font-size: 9px;
}


/* =========================================================
   EDITOR MOCKUP
   ========================================================= */

.mon-editor-top {
    display: flex;

    justify-content: space-between;

    padding-bottom: 16px;

    border-bottom: 1px solid #e8ebef;

    color: #898f98;

    font-size: 9px;
}

.mon-editor-top b {
    color: var(--mon-green);
}

.mon-editor-demo h4 {
    margin: 22px 0;

    color: #2c3037;

    font-size: 18px;
}

.mon-editor-demo h5 {
    margin: 22px 0 12px;

    color: #454a53;
}

.mon-text-line {
    height: 6px;

    margin-bottom: 8px;

    border-radius: 20px;

    background: #e2e5ea;
}

.w95 { width:95%; }
.w93 { width:93%; }
.w90 { width:90%; }
.w88 { width:88%; }
.w78 { width:78%; }
.w70 { width:70%; }

.mon-ai-cursor {
    width: 2px;
    height: 14px;

    margin-top: 13px;

    background: var(--mon-primary);

    animation: monBlink .8s infinite;
}

@keyframes monBlink {

    50% {
        opacity: 0;
    }

}


/* =========================================================
   AI READY SCORE
   ========================================================= */

.mon-gauge-card {
    display: flex;

    align-items: center;

    gap: 28px;
}

.mon-circle-score {
    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    flex: 0 0 150px;

    height: 150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #fff 55%,
            transparent 57%
        ),
        conic-gradient(
            var(--mon-green) 0 92%,
            #e7eaee 92%
        );
}

.mon-circle-score span {
    color: #9499a2;

    font-size: 8px;
}

.mon-circle-score strong {
    color: #25282e;

    font-size: 37px;
}

.mon-circle-score small {
    color: #8b919b;
}

.mon-check-list {
    flex: 1;
}

.mon-check-list div {
    padding: 10px 0;

    border-bottom: 1px solid #eceef1;

    color: #555b65;

    font-size: 11px;
}

.mon-check-list i {
    display: inline-block;

    width: 7px;
    height: 7px;

    margin-right: 8px;

    border-radius: 50%;

    background: var(--mon-green);
}


/* =========================================================
   AI IMAGE DEMO
   ========================================================= */

.mon-image-generator {
    flex-direction: column;
}

.mon-image-preview {
    position: relative;

    width: 100%;
    height: 215px;

    overflow: hidden;

    border-radius: 7px;

    background:
        linear-gradient(
            135deg,
            #fff0ea,
            #edf4ff
        );
}

.mon-image-glow {
    position: absolute;

    width: 200px;
    height: 200px;

    left: 50%;
    top: 50%;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(239,75,63,.45),
            rgba(66,103,245,.35)
        );

    filter: blur(45px);

    transform: translate(-50%,-50%);

    animation: monPulse 4s infinite;
}

@keyframes monPulse {

    50% {
        transform:
            translate(-50%,-50%)
            scale(1.2);

        opacity: .6;
    }

}

.mon-ai-symbol {
    position: absolute;

    left: 50%;
    top: 50%;

    color: #fff;

    font-size: 60px;
    font-weight: 900;

    transform: translate(-50%,-50%);

    text-shadow:
        0 8px 30px rgba(40,50,80,.18);
}

.mon-prompt {
    display: flex;

    width: 100%;

    margin-top: 12px;
    padding: 6px;

    border: 1px solid #e0e4ea;
    border-radius: 6px;

    background: #fff;
}

.mon-prompt span {
    flex: 1;

    padding: 8px;

    color: #8b919b;

    font-size: 9px;
}

.mon-prompt button {
    padding: 0 14px;

    border: 0;
    border-radius: 4px;

    background: var(--mon-primary);

    color: #fff;

    font-size: 9px;
    font-weight: 700;
}


/* =========================================================
   COMPARISON
   ========================================================= */

.mon-compare {
    display: grid;

    grid-template-columns:
        1fr
        70px
        1fr;

    align-items: center;

    gap: 20px;
}

.mon-compare-card {
    padding: 42px;

    border: 1px solid #e3e6eb;
    border-radius: 8px;

    background: #fff;
}

.mon-compare-card.ai {
    border-color: rgba(239,75,63,.24);

    box-shadow:
        0 20px 55px rgba(239,75,63,.08);
}

.mon-compare-label {
    color: #9298a2;

    font-size: 8px;

    letter-spacing: 1.4px;
}

.mon-compare-card.ai .mon-compare-label {
    color: var(--mon-primary);
}

.mon-compare-card h3 {
    margin: 14px 0 25px;

    color: #282c32;

    font-size: 25px;
}

.mon-compare-item {
    padding: 13px 0;

    border-bottom: 1px solid #edf0f2;

    color: #686e77;
}

.mon-compare-card.ai .mon-compare-item {
    color: #454a52;
}

.mon-vs {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    border: 1px solid #e2e5e9;
    border-radius: 50%;

    background: #fff;

    color: #777d86;

    font-weight: 800;

    box-shadow:
        0 8px 25px rgba(20,30,50,.07);
}


/* =========================================================
   WORKFLOW / CAPABILITY CARDS
   ========================================================= */

.mon-workflow-grid,
.mon-capabilities {
    display: grid;

    grid-template-columns: repeat(3,1fr);

    gap: 15px;
}

.mon-work-card,
.mon-cap-card {
    position: relative;

    min-height: 185px;

    padding: 27px;

    overflow: hidden;

    border: 1px solid #e3e6eb;
    border-radius: 7px;

    background: #fff;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.mon-work-card:hover,
.mon-cap-card:hover {
    transform: translateY(-7px);

    border-color: rgba(239,75,63,.25);

    box-shadow:
        0 18px 45px rgba(25,35,55,.09);
}

.mon-work-card > span {
    position: absolute;

    right: 18px;
    top: 10px;

    color: #f0f1f3;

    font-size: 45px;
    font-weight: 900;
}

.mon-work-card i,
.mon-cap-card i {
    display: block;

    margin-bottom: 20px;

    color: var(--mon-primary);

    font-size: 23px;

    font-style: normal;
}

.mon-work-card h3,
.mon-cap-card h3 {
    color: #30343a;

    font-size: 17px;
}

.mon-work-card p,
.mon-cap-card p {
    color: var(--mon-muted) !important;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   BIG STATEMENT
   ========================================================= */

.mon-statement {
    position: relative;

    overflow: hidden;

    padding: 115px 0;

    border-top: 1px solid #eceef1;
    border-bottom: 1px solid #eceef1;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(245,154,47,.08),
            transparent 38%
        ),
        #fff;
}

.mon-statement h2 {
    font-size: 46px;
}

.mon-statement p {
    width: 750px;
    max-width: 100%;

    margin: 23px auto 0;

    color: var(--mon-muted) !important;

    font-size: 16px;
    line-height: 1.8;
}


/* =========================================================
   FAQ
   ========================================================= */

.mon-faq-item {
    margin-bottom: 10px;

    overflow: hidden;

    border: 1px solid #e2e5ea;
    border-radius: 6px;

    background: #fff;
}

.mon-faq-item button {
    display: flex;

    justify-content: space-between;

    width: 100%;

    padding: 20px 23px;

    border: 0;
    outline: 0;

    background: #fff;

    color: #33373e;

    text-align: left;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;
}

.mon-faq-item button span {
    color: var(--mon-primary);

    font-size: 19px;

    transition: transform .3s ease;
}

.mon-faq-content {
    max-height: 0;

    overflow: hidden;

    transition:
        max-height .4s ease;
}

.mon-faq-content p {
    margin: 0;

    padding:
        0
        23px
        23px;

    color: var(--mon-muted) !important;

    line-height: 1.7;
}

.mon-faq-item.open {
    border-color: rgba(239,75,63,.25);

    box-shadow:
        0 12px 30px rgba(30,40,60,.05);
}

.mon-faq-item.open .mon-faq-content {
    max-height: 250px;
}

.mon-faq-item.open button span {
    transform: rotate(45deg);
}


/* =========================================================
   CTA
   ========================================================= */

.mon-cta {
    overflow: hidden;

    border-top: 1px solid #eceef2;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(239,75,63,.07),
            transparent 45%
        ),
        #fff;
}

.mon-cta h2 {
    max-width: 850px;

    margin: 14px auto;
}

.mon-cta p {
    max-width: 700px;

    margin: auto;

    color: var(--mon-muted) !important;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================================
   SCROLL ANIMATION
   ========================================================= */

.mon-reveal {
    opacity: 0;

    transform: translateY(42px);

    transition:
        opacity .75s cubic-bezier(.22,.61,.36,1),
        transform .75s cubic-bezier(.22,.61,.36,1);

    will-change:
        transform,
        opacity;
}

.mon-reveal.mon-visible {
    opacity: 1;

    transform: translateY(0);
}


/* Feature alternate direction */

.mon-feature:nth-child(even).mon-reveal {
    transform: translateX(-45px);
}

.mon-feature:nth-child(odd).mon-reveal {
    transform: translateX(45px);
}

.mon-feature.mon-visible {
    transform: translateX(0);
}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 991px) {

    .mon-section {
        padding: 75px 0;
    }

    .mon-hero {
        min-height: auto;

        padding-top: 75px;
    }

    .mon-hero-title {
        font-size: 44px;
    }

    .mon-dashboard-body {
        min-height: 340px;
    }

    .mon-sidebar {
        display: none;
    }

    .mon-feature,
    .mon-feature-reverse {
        grid-template-columns: 1fr;
    }

    .mon-feature-reverse .mon-feature-content,
    .mon-feature-reverse .mon-feature-ui {
        order: initial;
    }

    .mon-feature-ui,
    .mon-feature-reverse .mon-feature-ui {
        border:
            0;

        border-top:
            1px solid #edf0f3;
    }

    .mon-workflow-grid,
    .mon-capabilities {
        grid-template-columns:
            repeat(2,1fr);
    }

    .mon-compare {
        grid-template-columns: 1fr;
    }

    .mon-vs {
        margin: auto;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .mon-container {
        max-width: calc(100% - 28px);
    }

    .mon-hero {
        padding-top: 65px;
    }

    .mon-hero-title {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .mon-hero-desc {
        font-size: 15px;
    }

    .mon-heading h2,
    .mon-statement h2,
    .mon-cta h2 {
        font-size: 29px;

        letter-spacing: -.5px;
    }

    .mon-dashboard-wrap {
        margin-top: 45px;
        margin-bottom: -90px;
    }

    .mon-main-panel {
        padding: 18px;
    }

    .mon-panel-head {
        flex-direction: column;
    }

    .mon-score {
        text-align: left;
    }

    .mon-dark-section:first-of-type {
        padding-top: 150px;
    }

    .mon-feature-content,
    .mon-feature-ui {
        padding: 25px;
    }

    .mon-feature-content h3 {
        font-size: 22px;
    }

    .mon-gauge-card {
        flex-direction: column;
    }

    .mon-workflow-grid,
    .mon-capabilities {
        grid-template-columns: 1fr;
    }

    .mon-kpi-row {
        grid-template-columns: 1fr;
    }

    .mon-btn {
        display: block;

        width: 100%;

        margin: 7px 0;

        text-align: center;
    }

}
/* ==========================================================
   MON AI PRICING PAGE
   White theme - Monster Design
   ========================================================== */

#mon-ai-pricing {
    --mp-primary:#ef493f;
    --mp-orange:#f59b32;
    --mp-green:#2ebd6b;
    --mp-blue:#3f6df5;
    --mp-dark:#202329;
    --mp-text:#363b44;
    --mp-muted:#747b85;
    --mp-border:#e5e8ed;
    --mp-soft:#f7f8fa;

    overflow:hidden;
    background:#fff;
    color:var(--mp-text);
}

#mon-ai-pricing *,
#mon-ai-pricing *:before,
#mon-ai-pricing *:after {
    box-sizing:border-box;
}

#mon-ai-pricing h1,
#mon-ai-pricing h2,
#mon-ai-pricing h3,
#mon-ai-pricing h4 {
    color:var(--mp-dark);
}

.mp-section {
    padding:90px 0;
}

.mp-soft {
    background:var(--mp-soft);
}


/* HERO */

.mp-hero {
    position:relative;
    padding:100px 0 80px;

    background:
        radial-gradient(
            circle at 20% 20%,
            rgba(239,73,63,.07),
            transparent 30%
        ),
        radial-gradient(
            circle at 80% 15%,
            rgba(63,109,245,.05),
            transparent 30%
        ),
        #fff;
}

.mp-eyebrow {
    display:inline-block;
    color:var(--mp-primary);
    font-size:11px;
    font-weight:700;
    letter-spacing:1.7px;
}

.mp-title {
    max-width:900px;
    margin:18px auto;

    font-size:51px;
    font-weight:800;
    line-height:1.1;
    letter-spacing:-1.5px;
}

.mp-title span,
.mp-section-head h2 span,
.mp-seo h2 span,
.mp-final h2 span {
    display:block;
    color:var(--mp-primary);
}

.mp-lead {
    max-width:780px;
    margin:0 auto;

    color:var(--mp-muted) !important;
    font-size:17px;
    line-height:1.75;
}

.mp-trust {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:25px;

    margin-top:30px;

    color:#666d77;
    font-size:12px;
}


/* SECTION HEAD */

.mp-section-head {
    max-width:800px;
    margin:0 auto 55px;
}

.mp-section-head h2 {
    margin:12px 0 15px;

    font-size:39px;
    font-weight:800;
    line-height:1.15;
    letter-spacing:-1px;
}

.mp-section-head p {
    color:var(--mp-muted) !important;
    font-size:15px;
    line-height:1.7;
}


/* PRICING GRID */

.mp-plans {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    align-items:stretch;
}

.mp-plan {
    position:relative;

    padding:30px 25px;

    border:1px solid var(--mp-border);
    border-radius:8px;

    background:#fff;

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}

.mp-plan:hover {
    transform:translateY(-7px);
    box-shadow:0 20px 45px rgba(30,40,60,.09);
}

.mp-featured {
    border:2px solid var(--mp-primary);
    box-shadow:0 18px 50px rgba(239,73,63,.09);
}

.mp-popular {
    position:absolute;
    left:50%;
    top:-14px;

    padding:6px 14px;

    transform:translateX(-50%);

    border-radius:30px;

    background:var(--mp-primary);
    color:#fff;

    white-space:nowrap;

    font-size:9px;
    font-weight:700;
    letter-spacing:1px;
}

.mp-plan-icon {
    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    margin-bottom:18px;

    border-radius:6px;

    background:rgba(239,73,63,.07);
    color:var(--mp-primary);

    font-size:18px;
}

.mp-plan-head h3 {
    margin:0 0 8px;
    font-size:23px;
}

.mp-plan-head p {
    min-height:70px;
    color:var(--mp-muted) !important;
    font-size:12px;
    line-height:1.6;
}

.mp-price {
    display:flex;
    align-items:flex-start;

    margin:23px 0 5px;
}

.mp-currency {
    padding-top:7px;

    color:#343941;

    font-size:18px;
    font-weight:700;
}

.mp-price strong {
    color:#1f2228;
    font-size:48px;
    line-height:1;
}

.mp-period {
    align-self:flex-end;
    padding:0 0 6px 4px;

    color:#858b94;
    font-size:11px;
}

.mp-managed {
    margin-bottom:18px;
    color:var(--mp-green);
    font-size:10px;
    font-weight:700;
}

.mp-btn {
    display:block;

    width:100%;

    padding:13px 15px;

    border:1px solid #d9dde3;
    border-radius:5px;

    background:#fff;
    color:#3d424b !important;

    text-align:center;
    text-decoration:none !important;

    font-size:12px;
    font-weight:700;

    transition:.25s ease;
}

.mp-btn:hover {
    border-color:var(--mp-primary);
    color:var(--mp-primary) !important;
    transform:translateY(-2px);
}

.mp-btn-primary {
    border-color:var(--mp-primary);

    background:
        linear-gradient(
            90deg,
            var(--mp-primary),
            var(--mp-orange)
        );

    color:#fff !important;

    box-shadow:
        0 10px 25px rgba(239,73,63,.18);
}

.mp-btn-primary:hover {
    color:#fff !important;
}

.mp-divider {
    height:1px;
    margin:25px 0;
    background:#eceef1;
}

.mp-plan h4 {
    margin-bottom:17px;
    font-size:12px;
}

.mp-features {
    margin:0;
    padding:0;
    list-style:none;
}

.mp-features li {
    position:relative;

    padding:7px 0 7px 20px;

    color:#5c626c;
    font-size:11px;
    line-height:1.45;
}

.mp-features li:before {
    content:"✓";

    position:absolute;
    left:0;

    color:var(--mp-green);
    font-weight:700;
}


/* MANAGED SERVICE */

.mp-service-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.mp-service {
    position:relative;

    min-height:220px;

    padding:28px;

    overflow:hidden;

    border:1px solid var(--mp-border);
    border-radius:7px;

    background:#fff;

    transition:.3s ease;
}

.mp-service:hover {
    transform:translateY(-6px);

    box-shadow:
        0 18px 40px rgba(30,40,60,.07);
}

.mp-service > i {
    position:absolute;
    right:15px;
    top:5px;

    color:#f1f2f4;

    font-size:52px;
    font-style:normal;
    font-weight:900;
}

.mp-service > span {
    display:flex;
    align-items:center;
    justify-content:center;

    width:40px;
    height:40px;

    margin-bottom:23px;

    border-radius:6px;

    background:rgba(239,73,63,.07);
    color:var(--mp-primary);

    font-size:19px;
}

.mp-service h3 {
    font-size:17px;
}

.mp-service p {
    color:var(--mp-muted) !important;
    font-size:12px;
    line-height:1.65;
}


/* WORKFLOW */

.mp-workflow {
    display:flex;
    align-items:center;
    justify-content:center;
}

.mp-work {
    flex:1;

    min-height:150px;

    padding:23px;

    border:1px solid var(--mp-border);
    border-radius:7px;

    background:#fff;

    text-align:center;
}

.mp-work > span {
    display:inline-block;

    margin-bottom:12px;

    color:var(--mp-primary);

    font-size:10px;
    font-weight:800;
}

.mp-work h3 {
    font-size:15px;
}

.mp-work p {
    margin-bottom:0;

    color:var(--mp-muted) !important;

    font-size:11px;
    line-height:1.6;
}

.mp-arrow {
    flex:0 0 35px;

    color:#bcc1c9;
    text-align:center;
}


/* COMPARISON TABLE */

.mp-table-wrap {
    overflow-x:auto;

    border:1px solid var(--mp-border);
    border-radius:8px;

    background:#fff;

    box-shadow:
        0 12px 35px rgba(25,35,55,.04);
}

.mp-table {
    width:100%;
    min-width:800px;

    margin:0;

    border-collapse:collapse;
}

.mp-table th,
.mp-table td {
    padding:15px 17px;

    border-bottom:1px solid #eceef1;

    text-align:center;

    font-size:11px;
}

.mp-table th:first-child,
.mp-table td:first-child {
    width:36%;
    text-align:left;
}

.mp-table thead th {
    padding-top:20px;
    padding-bottom:20px;

    background:#fff;

    color:#2f343b;

    font-size:12px;
}

.mp-table .mp-category td {
    padding-top:11px;
    padding-bottom:11px;

    background:#f6f7f9;

    color:#858b94;

    font-size:9px;
    font-weight:700;
    letter-spacing:1px;
}

.mp-table .mp-pro-col {
    background:rgba(239,73,63,.035);
    color:var(--mp-primary);
    font-weight:700;
}


/* SEO SECTION */

.mp-seo {
    padding:110px 0;

    border-top:1px solid #eceef1;
    border-bottom:1px solid #eceef1;

    background:
        radial-gradient(
            circle at center,
            rgba(239,73,63,.06),
            transparent 42%
        ),
        #fff;
}

.mp-seo h2 {
    max-width:850px;

    margin:12px auto 18px;

    font-size:43px;
    line-height:1.15;
    font-weight:800;
}

.mp-seo p {
    max-width:760px;

    margin:0 auto;

    color:var(--mp-muted) !important;

    font-size:15px;
    line-height:1.75;
}

.mp-seo-flow {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap;

    gap:13px;

    margin-top:30px;
}

.mp-seo-flow span {
    padding:9px 14px;

    border:1px solid #e0e3e8;
    border-radius:30px;

    background:#fff;

    color:#4e545d;

    font-size:11px;
}

.mp-seo-flow b {
    color:#b3b8c0;
}


/* FAQ */

.mp-faq details {
    margin-bottom:9px;

    border:1px solid var(--mp-border);
    border-radius:6px;

    background:#fff;
}

.mp-faq summary {
    position:relative;

    padding:19px 45px 19px 21px;

    color:#343940;

    cursor:pointer;

    font-size:13px;
    font-weight:700;

    list-style:none;
}

.mp-faq summary::-webkit-details-marker {
    display:none;
}

.mp-faq summary:after {
    content:"+";

    position:absolute;
    right:20px;

    color:var(--mp-primary);

    font-size:20px;
}

.mp-faq details[open] summary:after {
    content:"−";
}

.mp-faq details p {
    margin:0;

    padding:0 21px 20px;

    color:var(--mp-muted) !important;

    font-size:12px;
    line-height:1.7;
}


/* FINAL CTA */

.mp-final {
    padding:80px 0 100px;
    background:#fff;
}

.mp-final-box {
    padding:65px 40px;

    border:1px solid var(--mp-border);
    border-radius:10px;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(239,73,63,.07),
            transparent 50%
        ),
        #fafbfc;
}

.mp-final h2 {
    max-width:800px;

    margin:13px auto 18px;

    font-size:39px;
    line-height:1.15;
    font-weight:800;
}

.mp-final p {
    max-width:650px;

    margin:0 auto;

    color:var(--mp-muted) !important;

    font-size:14px;
}

.mp-final-buttons {
    display:flex;
    justify-content:center;

    gap:10px;

    margin-top:28px;
}

.mp-final-buttons .mp-btn {
    width:auto;
    min-width:190px;
}


/* TABLET */

@media (max-width:1100px) {

    .mp-plans {
        grid-template-columns:repeat(2,1fr);
    }

    .mp-service-grid {
        grid-template-columns:repeat(2,1fr);
    }

    .mp-workflow {
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .mp-arrow {
        display:none;
    }
}


/* MOBILE */

@media (max-width:600px) {

    .mp-section {
        padding:65px 0;
    }

    .mp-hero {
        padding:70px 0 55px;
    }

    .mp-title {
        font-size:34px;
        letter-spacing:-.8px;
    }

    .mp-lead {
        font-size:15px;
    }

    .mp-section-head h2,
    .mp-seo h2,
    .mp-final h2 {
        font-size:29px;
    }

    .mp-plans,
    .mp-service-grid,
    .mp-workflow {
        grid-template-columns:1fr;
    }

    .mp-plan {
        padding:28px 22px;
    }

    .mp-plan-head p {
        min-height:0;
    }

    .mp-trust {
        display:block;
    }

    .mp-trust span {
        display:block;
        margin:8px 0;
    }

    .mp-final-box {
        padding:45px 22px;
    }

    .mp-final-buttons {
        display:block;
    }

    .mp-final-buttons .mp-btn {
        width:100%;
        margin:8px 0;
    }
}