.mp-container{max-width:1300px; margin:auto;}
/* ===============================
   Global Section Heading
================================= */

.mp-section-heading{
    max-width:850px;
    margin:0 auto 60px;
    text-align:center;
}

.mp-section-label{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#ff6a2c;
    margin-bottom:12px;
}

.mp-section-heading h2{
    margin:0;
    color:#173b8f;
    font-size:48px;
    font-weight:700;
    line-height:1.15;
}

.mp-heading-line{
    width:60px;
    height:4px;
    margin:18px auto 28px;
    border-radius:100px;
    background:linear-gradient(90deg,#ff6a2c,#ffb36b);
    box-shadow:0 0 20px rgba(255,106,44,.25);
}

.mp-section-heading p{
    margin:0;
    color:#5e6b87;
    font-size:18px;
    line-height:1.8;
    font-weight:400;
}

/* Left Align Modifier */

.mp-section-heading.left{
    text-align:left;
    margin-left:0;
    margin-right:0;
}

.mp-section-heading.left .mp-heading-line{
    margin:18px 0 28px;
}

/* Responsive */

@media (max-width:991px){

.mp-section-heading h2{
    font-size:40px;
}

.mp-section-heading p{
    font-size:17px;
}

}

@media (max-width:767px){

.mp-section-heading{
    margin-bottom:40px;
}

.mp-section-heading h2{
    font-size:32px;
}

.mp-section-heading p{
    font-size:16px;
    line-height:1.7;
}

.mp-heading-line{
    margin:16px auto 24px;
}

.mp-section-heading.left .mp-heading-line{
    margin:16px 0 24px;
}

}

.main-product-header{
    padding: 100px 0 100px;
    background: #00052a;
    position: relative;
    overflow: hidden;

    /* KEY FIX: reserve layout space to prevent CLS */
    min-height: 420px;

    /* stabilize rendering context */
    isolation: isolate;
}

/* TOP-LEFT GLOW (ORANGE) */
.main-product-header::before{
    content:"";
    position:absolute;

    top:-420px;
    left:-520px;

    width:1000px;
    height:1000px;

    border-radius:50%;

    background:radial-gradient(circle, rgb(2 142 237 / 65%) 0%, rgb(4 112 200 / 35%) 30%, rgba(0, 102, 255, .15) 55%, transparent 75%);

    filter:blur(90px);

    pointer-events:none;

    z-index:-1;

    will-change:transform;
    transform:translate3d(0,0,0);
    backface-visibility:hidden;
}

.header-row{
    display:flex;
    flex-wrap:wrap;
    gap:0;
    justify-content:center;
	padding:50px 0;
}

/* =========================
   TEXT AREA (SUBTLE LIFT)
========================= */

.header-text{
    flex:0 0 50%;
    transition:.4s ease;
}

.header-text:hover{
    transform:translateY(-4px);
}

/* =========================
   LIST ITEMS ANIMATION
========================= */

.main-product-header ul li{
    position:relative;
    line-height:40px;
    transition:.3s ease;
	color:#d1d0d0;
}

.main-product-header ul li:hover{
    transform:translateX(8px);
    color:#ffffff;
}

/* ICON GLOW */
.main-product-header ul li svg{
    width:14px !important;
    height:14px !important;
    stroke:white;
    background:linear-gradient(135deg,#0b6cff 0%,#1890ff 50%,#42c5ff 100%);
    padding:5px;
    border-radius:50%;
    position:relative;
    top:7px;
    margin-right:10px;
    transition:.3s ease;
}

.main-product-header ul li:hover svg{
    box-shadow:0 0 18px rgba(11,102,210,.6);
    transform:scale(1.05);
}

/* =========================
   TYPOGRAPHY GLOW
========================= */

.main-product-header h1{
        font-size: clamp(48px,5vw,60px);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 25px rgba(255, 106, 44, .15);
    position: relative;
    z-index: 1;
}

.main-product-header h1 span{
    color:#fff;
    display:block;

	
}

.main-product-header p{
    color:#d1d1d1;
    font-size:18px;
    line-height:29px;
    padding-top:10px;
}

/* =========================
   IMAGE FLOAT + HOVER
========================= */

.header-image{
    flex:0 0 50%;
    position:relative;
}

.header-image img{
    max-width:100%;
    transition:.5s ease;
    animation:floatImg 6s ease-in-out infinite;
	height:auto;
}

.header-image:hover img{
    transform:scale(1.04) translateY(-5px);
}

@keyframes floatImg{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-12px);}
}

/* =========================
   CTA BUTTONS (2026 STYLE)
========================= */

.cta-buttons-row{
    display:flex;
    gap:15px;
    margin-top:30px;
}

/* BASE BUTTON */
.cta-buttons-row a{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    font-weight:600;
    padding:16px 28px;
    border-radius:14px;
    transition:.35s ease;
    position:relative;
    overflow:hidden;
}

/* PRIMARY (ORANGE GRADIENT) */
.cta-buttons-row a:first-child{
        background: linear-gradient(135deg, #0b6cff 0%, #1890ff 50%, #42c5ff 100%);
    color: #fff;
    border: none;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(24, 144, 255, .35), 0 4px 12px rgba(66, 197, 255, .2);

}

.cta-buttons-row a:first-child:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 45px rgba(255,106,44,.45);
}

/* SHINE EFFECT */
.cta-buttons-row a:first-child:before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );
    transition:.7s;
}

.cta-buttons-row a:first-child:hover:before{
    left:140%;
}

/* SECONDARY (WHITE BUTTON) */
.cta-buttons-row a:last-child{
    background:#ffffff;
    color:#00052a;
    box-shadow:0 12px 25px rgba(255,255,255,.08);
}

.cta-buttons-row a:last-child:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 40px rgba(255,255,255,.18);
}

/* ICON SIZE */
.cta-buttons-row svg{
    width:18px;
    height:18px;
}




/* =====================
   WORKFLOW
===================== */

.workflow-section{
    padding:100px 0;
}

.workflow-section h2{
    text-align:center;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    color: #203a7c;
    margin-bottom: 12px;

}

.orange-line.center{
    margin:0 auto 50px;
}

.workflow-grid{
    display:grid;
    grid-template-columns:1fr 60px 1fr 60px 1fr;
    align-items:center;
    gap:10px;
	padding-top:50px;
}

.workflow-grid{
    display:grid;
    grid-template-columns:1fr 60px 1fr 60px 1fr;
    align-items:center;
    gap:10px;
    padding-top:50px;
}

/* ==========================================
   Cards
========================================== */

.workflow-card{
    background:#fff;
    border-radius:18px;
    padding:35px 20px;
    position:relative;
    box-shadow:0 8px 24px rgba(0,0,0,.06);
    min-height:145px;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        opacity .7s ease,
        filter .7s ease;

    /* Reveal */
    opacity:0;
    transform:translateY(50px);
    filter:blur(2px);
}

.workflow-grid.is-visible .workflow-card:nth-child(1){
    opacity:1;
    transform:translateY(0);
    filter:none;
    transition-delay:.1s;
}

.workflow-grid.is-visible .workflow-card:nth-child(3){
    opacity:1;
    transform:translateY(0);
    filter:none;
    transition-delay:.45s;
}

.workflow-grid.is-visible .workflow-card:nth-child(5){
    opacity:1;
    transform:translateY(0);
    filter:none;
    transition-delay:.8s;
}

/* Hover */

.workflow-card:hover{
    transform:translateY(-8px) !important;
    box-shadow:0 18px 40px rgba(0,0,0,.12);
}

/* ==========================================
   Step Number
========================================== */

.step-number{
    position:absolute;
    top:-21px;
    left:18px;

    width:45px;
    height:45px;

    background:#173b8f;
    color:#fff;

    border-radius:50%;

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

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

    z-index:2;

    transition:transform .35s ease;
}

.workflow-card:hover .step-number{
    transform:scale(1.1);
}

.step-number::before{
    content:"";
    position:absolute;

    width:80px;
    height:40px;

    left:50%;
    top:50%;

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

    border-radius:40px 40px 0 0;

    box-shadow:0 -4px 20px rgba(0,0,0,.08);

    z-index:-1;
}

/* ==========================================
   Icon
========================================== */

.workflow-icon{
    width:70px;
    height:70px;

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

    border-radius:50%;

    background:#f3f5fb;

    color:#173b8f;
    font-size:30px;

    margin-bottom:20px;

    transition:all .35s ease;
}

.workflow-card:hover .workflow-icon{
    transform:rotate(10deg) scale(1.08);
    background:#173b8f;
    color:#fff;
}

/* ==========================================
   Text
========================================== */

.workflow-card h3{
    color:#203a7c;
    margin-bottom:14px;
    font-size:22px;
}

.workflow-card p{
    color:#555;
    line-height:1.7;
    font-size:14px;
}

/* ==========================================
   Arrows
========================================== */

.arrow{
    text-align:center;
    font-size:28px;
    color:#203a7c;

    opacity:0;
    transform:translateX(-30px);

    transition:
        opacity .45s ease,
        transform .45s ease;
}

.workflow-grid.is-visible .arrow:nth-child(2){
    opacity:1;
    transform:translateX(0);
    transition-delay:.28s;
}

.workflow-grid.is-visible .arrow:nth-child(4){
    opacity:1;
    transform:translateX(0);
    transition-delay:.65s;
}

/* ==========================================
   Bottom
========================================== */

.workflow-bottom-card{
    display:grid;
    grid-template-columns:80px 1fr;
}

/* ==========================================
   Mobile
========================================== */

@media(max-width:768px){

    .workflow-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .arrow{
        transform:translateY(-20px) rotate(90deg);
    }

    .workflow-grid.is-visible .arrow{
        transform:translateY(0) rotate(90deg);
    }

}

.library-section{
    padding:100px 0;
    background:#fff;
}

.library-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:30px;
    margin-top:55px;
}
/* ===========================
   Card
=========================== */

.library-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    text-decoration:none;

    background:#fff;
    border:1px solid #edf1f7;
    border-radius:20px;

    padding:28px 18px;
    min-height:180px;

    position:relative;
    overflow:hidden;

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

    opacity:0;
    transform:translateY(40px);
}

/* Background */

.library-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,#ffffff,#f8fbff);
    opacity:0;
    transition:.15s ease;
}

/* Shine */

.library-card::after{
    content:"";
    position:absolute;
    top:-150%;
    left:-150%;
    width:220%;
    height:220%;

    background:linear-gradient(
        135deg,
        transparent 35%,
        rgba(255,255,255,.45) 50%,
        transparent 65%
    );

    transform:rotate(25deg);
    transition:.35s ease;
}

/* Hover */

.library-card:hover{
    transform:translateY(-8px);
    border-color:#dce8ff;
    box-shadow:0 20px 45px rgba(5,32,78,.14);
}

.library-card:hover::before{
    opacity:1;
}

.library-card:hover::after{
    top:100%;
    left:100%;
}

/* ===========================
   Icon
=========================== */

.library-icon{
    width:74px;
    height:74px;

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

    border-radius:22px;

    margin-bottom:18px;

    position:relative;
    z-index:2;

    transition:.15s ease;
}

.library-icon i{
    font-size:34px;
    transition:.15s ease;
}

.library-card:hover .library-icon{
    transform:translateY(-6px) rotate(-6deg);
}

.library-card:hover .library-icon i{
    transform:rotate(6deg);
}

/* ===========================
   Title
=========================== */

.library-card h3{
    position:relative;
    z-index:2;

    margin:0;

    font-size:16px;
    font-weight:700;
    line-height:1.45;

    color:#00205b;

    transition:.15s ease;
}

.library-card:hover h3{
    color:#173b8f;
}

/* ===========================
   Reveal Animation
=========================== */

@keyframes libraryReveal{

    from{
        opacity:0;
        transform:translateY(40px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}

.library-grid.is-visible .library-card{
    animation:libraryReveal .55s cubic-bezier(.22,1,.36,1) forwards;
}

.library-grid.is-visible .library-card:nth-child(1){animation-delay:.03s;}
.library-grid.is-visible .library-card:nth-child(2){animation-delay:.06s;}
.library-grid.is-visible .library-card:nth-child(3){animation-delay:.09s;}
.library-grid.is-visible .library-card:nth-child(4){animation-delay:.12s;}
.library-grid.is-visible .library-card:nth-child(5){animation-delay:.15s;}
.library-grid.is-visible .library-card:nth-child(6){animation-delay:.18s;}
.library-grid.is-visible .library-card:nth-child(7){animation-delay:.21s;}
.library-grid.is-visible .library-card:nth-child(8){animation-delay:.24s;}
.library-grid.is-visible .library-card:nth-child(9){animation-delay:.27s;}
.library-grid.is-visible .library-card:nth-child(10){animation-delay:.30s;}
.library-grid.is-visible .library-card:nth-child(11){animation-delay:.33s;}
.library-grid.is-visible .library-card:nth-child(12){animation-delay:.36s;}

/* ===========================
   Colors
=========================== */

.amino{background:#eef3ff;}
.amino i{color:#4b6fff;}

.bile{background:#edf9ef;}
.bile i{color:#3fb95d;}

.fatty{background:#fff4e8;}
.fatty i{color:#ff9922;}

.organic{background:#edf8ff;}
.organic i{color:#1c9df4;}

.microbiome{background:#effff2;}
.microbiome i{color:#55c647;}

.polyphenol{background:#fff2e8;}
.polyphenol i{color:#ff6d3c;}

.phyto{background:#eefcf1;}
.phyto i{color:#39b36f;}

.large{background:#eef3ff;}
.large i{color:#4e73ff;}

.mass{background:#eef8ff;}
.mass i{color:#00a2ff;}

.msmls{background:#eef7ff;}
.msmls i{color:#0078ff;}

.onco{background:#f7efff;}
.onco i{color:#9c4cff;}

.custom{background:#f3f5fa;}
.custom i{color:#67758d;}

.library-btn{
    text-align:center;
    margin-top:45px;
}
/* ==========================================
   View More Button
========================================== */

.view-more-button{
    display:inline-flex;
    align-items:center;
    gap:14px;

    padding:16px 34px;

    background:linear-gradient(135deg,#173b8f 0%,#295fd8 100%);
    color:#fff;

    border-radius:60px;
    text-decoration:none;

    font-size:15px;
    font-weight:700;
    letter-spacing:.3px;

    position:relative;
    overflow:hidden;

    box-shadow:
        0 12px 30px rgba(23,59,143,.22);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}
.view-more-btn{margin-top: 50px;
    display: flex
;
    justify-content: center;}
/* Shine Effect */

.view-more-button::before{
    content:"";
    position:absolute;

    top:0;
    left:-120%;

    width:70%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.35),
        transparent
    );

    transform:skewX(-25deg);

    transition:left .6s ease;
}

/* Content */

.view-more-button span,
.view-more-button i{
    position:relative;
    z-index:2;
}

.view-more-button i{
    font-size:14px;
    transition:transform .25s ease;
}

/* Hover */

.view-more-button:hover{
    color:#fff;
    transform:translateY(-4px);
    box-shadow:
        0 18px 40px rgba(23,59,143,.35);
}

.view-more-button:hover::before{
    left:150%;
}

.view-more-button:hover i{
    transform:translateX(6px);
}

/* Active */

.view-more-button:active{
    transform:translateY(-1px);
}
@media(max-width:1200px){

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

}

@media(max-width:992px){

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

}

@media(max-width:768px){

.library-grid{
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.library-card{
    min-height:165px;
    padding:24px 15px;
}

.library-icon{
    width:64px;
    height:64px;
    border-radius:18px;
}

.library-icon i{
    font-size:30px;
}

.library-card h3{
    font-size:15px;
}

}

@media(max-width:480px){

.library-grid{
    grid-template-columns:1fr;
}

}
/* =====================
   TOP STATS
===================== */

.stats-section{
    background:#fff;
    border-radius:22px;
    padding:40px 20px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    position:relative;
    z-index:1;
    top:-80px;
    margin-bottom:-50px;
}

.stat-item{
    position:relative;
    text-align:left;
    padding:0 20px;
    border-right:1px solid #ececec;

    display:grid;
    grid-template-columns:50px 1fr;
    gap:14px;

    transition:all .35s ease;
}

.stat-item:last-child{
    border-right:none;
}

/* Animated bottom line */
.stat-item::after{
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    bottom:-15px;
    height:3px;
    background:#1f3d8f;
    border-radius:10px;

    transform:scaleX(0);
    transform-origin:left;
    transition:.4s ease;
}

.stat-item:hover{
    transform:translateY(-8px);
}

.stat-item:hover::after{
    transform:scaleX(1);
}

/* =====================
   ICON
===================== */

.stat-icon{
    width:50px;
    height:50px;

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

    border-radius:16px;
    background:#eef4ff;

    color:#1f3d8f;
    font-size:24px;

    transition:all .35s ease;
}

.stat-item:hover .stat-icon{
    background:#1f3d8f;
    color:#fff;

    transform:scale(1.12);
    box-shadow:0 12px 25px rgba(31,61,143,.25);
}

/* =====================
   TEXT
===================== */

.stat-item-title{
    font-size:42px;
    font-weight:700;
    margin-bottom:6px;
    color:#1f3d8f;
    transition:.35s;
}

.stat-item-subtitle{
    font-size:18px;
    font-weight:700;
    margin-bottom:12px;
    color:#1f3d8f;
    transition:.35s;
}

.stat-item p{
    font-size:13px;
    color:#545a65;
    line-height:1.5;
}

.stat-item:hover .stat-item-title{
    transform:translateX(3px);
}

.stat-item:hover .stat-item-subtitle{
    transform:translateX(3px);
}

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

@media(max-width:992px){
	.header-row{padding-top:0px;}
    .stats-section{
        grid-template-columns:repeat(2,1fr);
        gap:25px;
    }

    .stat-item{
        border:none;
		        border-bottom: 1px solid #ececec;
        padding-bottom: 20px;

    }
	.stat-item:last-child{border-bottom:0px!important;}
    .why-section{
        grid-template-columns:1fr;
    }

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

    .arrow{
        transform:rotate(90deg);
    }
}

@media(max-width:576px){

    .stats-section{
        grid-template-columns:1fr;
    }

    .workflow-section h2,
    .why-content h2{
        font-size:32px;
    }
}





.challenge-solution-section{
    padding:70px 0;
	max-width:930px;
    margin:auto;
}

.mp-container{
    max-width:1300px;
    margin:auto;
}

/* ==========================================
   CONTAINER
========================================== */

.challenge-box{
    position:relative;
    display:flex;
    overflow:hidden;
    border-radius:14px;
    background:#fff;
    box-shadow:0 15px 45px rgba(0,0,0,.08);
}

/* Divider */

.challenge-box::before{
    content:"";
    position:absolute;
    left:50%;
    top:0;
    width:1px;
    height:100%;
    background:#ececec;
    z-index:1;
}

/* ==========================================
   LEFT
========================================== */

.challenge-left{
    position:relative;
    width:50%;
    padding:34px 36px;
    color:#fff;
    overflow:hidden;

    background:linear-gradient(135deg,#041437 0%,#061b46 55%,#0b2557 100%);

    opacity:0;
    transform:translateX(60px);
    transition:all .9s cubic-bezier(.22,1,.36,1);
}

/* ==========================================
   RIGHT
========================================== */

.challenge-right{
    width:50%;
    padding:34px 40px;
    background:#fff;

    opacity:0;
    transform:translateX(-60px);
    transition:all .9s cubic-bezier(.22,1,.36,1);
}

/* ==========================================
   TITLES
========================================== */

.challenge-title{
    font-size:11px;
    letter-spacing:2px;
    font-weight:700;
    margin-bottom:28px;
}

.challenge-title.dark{
    color:#0a2c66;
}

/* ==========================================
   ITEMS
========================================== */

.challenge-item{
    display:flex;
    gap:14px;
    align-items:flex-start;
    margin-bottom:22px;

    opacity:0;
    transform:translateY(25px);

    transition:
        transform .55s ease,
        opacity .55s ease;
}

.challenge-item h4{
    margin:0;
    font-size:15px;
    font-weight:700;
}

.challenge-item p{
    margin:4px 0 0;
    font-size:12px;
    line-height:1.45;
    opacity:.8;
}

/* Stagger */

.challenge-box.is-visible .challenge-item:nth-child(2){
    transition-delay:.25s;
}

.challenge-box.is-visible .challenge-item:nth-child(3){
    transition-delay:.35s;
}

.challenge-box.is-visible .challenge-item:nth-child(4){
    transition-delay:.45s;
}

.challenge-box.is-visible .challenge-item:nth-child(5){
    transition-delay:.55s;
}

.challenge-box.is-visible .challenge-item{
    opacity:1;
    transform:none;
}

/* Hover */

.challenge-item:hover{
    transform:translateX(6px);
}

/* ==========================================
   ICONS
========================================== */

.icon{
    width:28px;
    height:28px;
    min-width:28px;

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

    border-radius:50%;

    font-weight:700;

    transition:.3s;
}

.red{
    border:2px solid #ff5d5d;
    color:#ff5d5d;
}

.green{
    border:2px solid #34d399;
    color:#34d399;
}

.challenge-item:hover .icon{
    transform:scale(1.15);
}

/* ==========================================
   VS
========================================== */

.vs-circle{
    position:absolute;

    left:50%;
    top:50%;

    width:58px;
    height:58px;

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

    border-radius:50%;

    background:#fff;

    color:#1e3d8f;
    font-size:22px;
    font-weight:800;

    box-shadow:0 10px 35px rgba(0,0,0,.18);

    z-index:20;

    opacity:0;
    transform:translate(-50%,-50%) scale(.4);

    transition:
        transform .65s cubic-bezier(.34,1.56,.64,1),
        opacity .65s;
}

.challenge-box.is-visible .vs-circle{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

/* ==========================================
   MOLECULE
========================================== */

.molecule{
    position:absolute;

    right:-30px;
    top:-20px;

    width:360px;
    height:360px;

    opacity:0;

    background-image:
        radial-gradient(circle,#3ba5ff 2px,transparent 3px);

    background-size:40px 40px;

    transform:rotate(-12deg) scale(.9);

    transition:all 1.2s ease .4s;
}

.challenge-box.is-visible .molecule{
    opacity:.18;
    transform:rotate(-12deg) scale(1);
}

/* ==========================================
   PANEL REVEAL
========================================== */

.challenge-box.is-visible .challenge-left{
    opacity:1;
    transform:none;
}

.challenge-box.is-visible .challenge-right{
    opacity:1;
    transform:none;
}

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

@media(max-width:991px){

    .challenge-box{
        flex-direction:column;
    }

    .challenge-left,
    .challenge-right{
        width:100%;
    }

    .challenge-box::before{
        display:none;
    }
}

@media(max-width:767px){

.challenge-left,
.challenge-right{

padding:30px 24px;

}

.challenge-item{

gap:12px;

}

.challenge-item h4{

font-size:14px;

}

.challenge-item p{

font-size:11px;

}

.vs-circle{

width:50px;
height:50px;

font-size:18px;

}

}
/*======================================
IROA Ecosystem
======================================*/

.mp-ecosystem{
    padding:50px 0;
    padding-bottom:100px;
    background:#f8fbff;
}

.ecosystem-grid{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:24px;
}

/*======================================
Cards
======================================*/

.ecosystem-card{
    flex:1;

    background:#fff;
    border-radius:18px;
    border:1px solid #edf2fb;

    padding:34px;

    box-shadow:0 12px 35px rgba(19,59,143,.08);

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

    position:relative;
    z-index:2;
}

.ecosystem-card:hover{
    transform:translateY(-8px) !important;
    box-shadow:0 20px 50px rgba(19,59,143,.12);
}

.ecosystem-card.featured{
    border:2px solid #ff8b42;
    box-shadow:0 20px 50px rgba(255,138,66,.18);
}

/*======================================
Icons
======================================*/

.eco-icon{
    width:72px;
    height:72px;

    border-radius:50%;

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

    background:#eef4ff;
    color:#173b8f;

    font-size:28px;

    margin-bottom:24px;

    transition:.35s ease;
}

.ecosystem-card:hover .eco-icon{
    transform:scale(1.08) rotate(8deg);
}

/*======================================
Text
======================================*/

.ecosystem-card h3{
    margin:0 0 16px;
    color:#173b8f;
    font-size:22px;
    font-weight:700;
}

.ecosystem-card p{
    color:#64748b;
    line-height:1.8;
    margin-bottom:26px;
}

.ecosystem-card a{
    display:inline-flex;
    align-items:center;
    gap:10px;

    text-decoration:none;
    color:#173b8f;
    font-weight:600;

    transition:.3s;
}

.ecosystem-card a:hover{
    color:#ff6a2c;
    gap:14px;
}

/*======================================
Arrows
======================================*/

.eco-arrow{
    color:#7ba3ff;
    font-size:34px;
    opacity:.7;
    transition:.35s ease;
}

/*======================================
Workflow Reveal
Requires:
step-left
step-center
step-right
arrow-1
arrow-2
======================================*/

.step-left{
    opacity:0;
    transform:translateX(-90px);
    transition:all .75s cubic-bezier(.22,1,.36,1);
}

.step-center{
    opacity:0;
    transform:translateY(-70px);
    transition:all .75s cubic-bezier(.22,1,.36,1);
}

.step-right{
    opacity:0;
    transform:translateX(90px);
    transition:all .75s cubic-bezier(.22,1,.36,1);
}

.arrow-1,
.arrow-2{
    opacity:0;
    transform:scaleX(0);
    transform-origin:left center;
    transition:all .4s ease;
}

/* Reveal */

.ecosystem-grid.is-visible .step-left{
    opacity:1;
    transform:none;
}

.ecosystem-grid.is-visible .arrow-1{
    opacity:.7;
    transform:scaleX(1);
    transition-delay:.35s;
}

.ecosystem-grid.is-visible .step-center{
    opacity:1;
    transform:none;
    transition-delay:.55s;
}

.ecosystem-grid.is-visible .arrow-2{
    opacity:.7;
    transform:scaleX(1);
    transition-delay:.8s;
}

.ecosystem-grid.is-visible .step-right{
    opacity:1;
    transform:none;
    transition-delay:1s;
}

/*======================================
Mobile
======================================*/

@media (max-width:768px){

    .ecosystem-grid{
        flex-direction:column;
        gap:20px;
    }

    .step-left,
    .step-center,
    .step-right{
        transform:translateY(50px);
    }

    .eco-arrow{
        transform:translateY(-20px) rotate(90deg);
        font-size:30px;
        margin:-5px 0;
        min-height:35px;
    }

    .ecosystem-grid.is-visible .arrow-1,
    .ecosystem-grid.is-visible .arrow-2{
        transform:translateY(0) rotate(90deg);
    }

}


.featured-products{
    padding:100px 0;
    background:#fff;
}

.products-row{
    display:flex;
    gap:24px;
    margin-top:45px;
}

.product-card{
   
    padding:30px;
    background:#fff;
    border:1px solid #edf2f8;
    border-radius:18px;
    text-decoration:none;
    transition:all .35s ease;
    position:relative;
    overflow:hidden;
	
}

.product-card::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,#f7fbff,#ffffff);
    opacity:0;
    transition:opacity .35s ease;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(5,35,85,.12);
    border-color:#d9e6ff;
}

.product-card:hover::before{
    opacity:1;
}

/* ==========================================
   Icon
========================================== */

.product-icon{
    width:90px;
    height:90px;
    flex-shrink:0;

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

    border-radius:18px;
    position:relative;
    overflow:hidden;
    z-index:2;
margin-bottom:20px;
    transition:all .45s ease;
}

.product-icon::before{
    content:"";
    position:absolute;
    top:-100%;
    left:-100%;
    width:200%;
    height:200%;
    background:linear-gradient(
        135deg,
        transparent 35%,
        rgba(255,255,255,.45) 50%,
        transparent 65%
    );
    transform:rotate(25deg);
    transition:.7s ease;
}

.product-icon i{
    font-size:36px;
    position:relative;
    z-index:2;
    transition:all .45s ease;
}

/* Hover Animation */

.product-card:hover .product-icon{
    transform:translateY(-6px) rotate(-8deg) scale(1.08);
}

.product-card:hover .product-icon::before{
    top:100%;
    left:100%;
}

.product-card:hover .product-icon i{
    transform:scale(1.01) rotate(8deg);
}

/* ==========================================
   Icon Colors
========================================== */

.product-icon.truquant{
    background:#E8F2FF;
}

.product-icon.truquant i{
    color:#2563EB;
}

.product-icon.library{
    background:#ECFDF3;
}

.product-icon.library i{
    color:#16A34A;
}

.product-icon.standard{
    background:#FFF4E8;
}

.product-icon.standard i{
    color:#F97316;
}

.product-icon.software{
    background:#F3ECFF;
}

.product-icon.software i{
    color:#7C3AED;
}

/* ==========================================
   Content
========================================== */

.product-content{
    position:relative;
    z-index:2;
}

.product-content h3{
    margin:0 0 8px;
    font-size:20px;
    line-height:1.3;
    color:#001b54;
    font-weight:700;
    transition:color .3s ease;
}

.product-content p{
    margin:0;
    font-size:14px;
    line-height:1.7;
    color:#68768f;
}

.product-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    margin-top:14px;
    font-size:14px;
    font-weight:600;
    color:#f58220;
    transition:all .3s ease;
}

.product-card:hover .product-link{
    gap:12px;
}

.product-card:hover .product-link i{
    transform:translateX(4px);
}

.product-link i{
    transition:transform .3s ease;
}
/*======================================
Product Cards Reveal
======================================*/

/* Initial state */
.products-row .product-card{
    opacity:0;
    transform:translateY(40px);
    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22,1,.36,1);
}

/* Staggered reveal */
.products-row.is-visible .product-card:nth-child(1){
    opacity:1;
    transform:translateY(0);
    transition-delay:.1s;
}

.products-row.is-visible .product-card:nth-child(2){
    opacity:1;
    transform:translateY(0);
    transition-delay:.25s;
}

.products-row.is-visible .product-card:nth-child(3){
    opacity:1;
    transform:translateY(0);
    transition-delay:.4s;
}

.products-row.is-visible .product-card:nth-child(4){
    opacity:1;
    transform:translateY(0);
    transition-delay:.55s;
}

.section-heading{
    text-align:center;
}

.section-heading span{
    display:inline-block;
    padding:6px 14px;
    background:#eef4ff;
    color:#2959d8;
    border-radius:100px;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

.section-heading h2{
    margin-top:16px;
    font-size:42px;
    color:#001b54;
    line-height:1.2;
}

@media(max-width:1100px){

.products-row{
    flex-wrap:wrap;
}

.product-card{
    flex:0 0 calc(50% - 12px);
}

}

@media(max-width:768px){

.products-row{
    flex-direction:column;
}

.product-card{
    flex:1;
}

.section-heading h2{
    font-size:32px;
}

}


@media(max-width:768px){
	.mp-container{ padding:0 20px;
       }
	.challenge-solution-section{padding:50px 20px;max-width:1300px;}
	.main-product-header{padding-top:150px;}
	.header-text {flex: 0 0 100%;}
	.main-product-header h1 {font-size: 38px;}
	.header-image {display:none!important;}
	.cta-buttons-row {    display: block;    margin-top: 30px;}
	.cta-buttons-row a{display:block;margin-bottom:20px;}
	.header-image{flex:0 0 100%;}
	.mp-cta-buttons{display: block;
    margin-top: 30px;}
}




:root{
    --mp-blue:#062a73;
    --mp-orange:#f05a1a;
    --mp-text:#1d2c4d;
}

.mp-resources{
    padding:100px 0;
}


/************************
RESOURCE GRID
************************/

.mp-resource-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:20px;
    margin-bottom:80px;
}

.mp-resource-item{
    text-decoration:none;
    display:block;
    color:inherit;
background:#fff;
    transition:
    transform .15s ease;
	    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    padding: 25px;
    border-radius: 18px;
}

.mp-resource-item:hover{
    transform:translateY(-4px);
}

.mp-resource-icon{
    color:var(--mp-blue);
    font-size:62px;
    margin-bottom:28px;

    transition:
    color .15s ease,
    transform .15s ease;
}

.mp-resource-item:hover .mp-resource-icon{
    color:var(--mp-orange);
    transform:scale(1.04);
}

.mp-resource-item h3{
    margin:0;
    font-size:22px;
    line-height:1.6;
    font-weight:600;
    color:var(--mp-blue);
	min-height:155px;
}

.mp-resource-download{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-top:28px;

    font-size:18px;
    font-weight:700;
    color:#e75212;

    position:relative;
}

.mp-resource-download:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;

    width:0;
    height:2px;

    background:var(--mp-orange);

    transition:width .15s ease;
}

.mp-resource-item:hover .mp-resource-download:after{
    width:100%;
}


/************************
TABLET
************************/

@media(max-width:1200px){

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

  
}

/************************
MOBILE
************************/

@media(max-width:768px){

    .mp-heading{
        font-size:34px;
    }

    .mp-resource-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .mp-resource-item{
        text-align:center;
    }

    
}

/*======================================
Documentation Search
======================================*/

.doc-search{
    padding:90px 0;
    background:
    radial-gradient(circle at left,#eef5ff 0%,transparent 35%),
    radial-gradient(circle at right,#eef5ff 0%,transparent 35%),
    linear-gradient(#ffffff,#f8fbff);

    overflow:visible;      /* changed */
}

.doc-search-grid{
    display:flex;
    gap:34px;
    margin-top:60px;

    position:relative;     /* added */
    align-items:flex-start;
    overflow:visible;      /* added */
}


.doc-card{
    flex:1;
    background:#fff;
    border-radius:28px;
    padding:38px;
    position:relative;

    overflow:visible;      /* added */

    z-index:1;             /* added */

    border:1px solid #edf2fa;
    box-shadow:0 10px 30px rgba(23,49,115,.05);

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

.doc-card:hover,
.doc-card:focus-within{
    z-index:999;           /* added */

    transform:translateY(-2px);
    box-shadow:0 16px 36px rgba(23,49,115,.08);
}

.coa{
    border-top:4px solid #2954ff;
}

.sds{
    border-top:4px solid #ff6b1b;
}

/*======================================
Top
======================================*/

.doc-top{
    display:flex;
    gap:28px;
    align-items:center;
}

.doc-icon{
    width:110px;
    height:110px;
    border-radius:50%;
    background:#eef3ff;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.coa .doc-icon{
    color:#2954ff;
}

.sds .doc-icon{
    background:#fff3ec;
    color:#ff6b1b;
}

.doc-icon i{
    font-size:46px;
}

.doc-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:#eef3ff;
    color:#2954ff;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:18px;
}

.sds .doc-tag{
    background:#fff2ea;
    color:#ff6b1b;
}

.doc-content h3{
    margin:0 0 14px;
    font-size:40px;
    color:#102b73;
}

.doc-content p{
    margin:0;
    font-size:18px;
    line-height:1.8;
    color:#68758f;
}

/*======================================
Search
======================================*/

.doc-form{
    display:flex;
    gap:18px;
    margin-top:38px;
}

.input-wrap{
    flex:1;
    display:flex;
    align-items:center;
    height:72px;
    padding:0 22px;
    background:#fff;
margin-top:30px;
    border:2px solid #e8edf7;
    border-radius:18px;

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

.coa .input-wrap:focus-within{
    border-color:#2954ff;
    box-shadow:0 0 0 4px rgba(41,84,255,.10);
}

.sds .input-wrap:focus-within{
    border-color:#ff6b1b;
    box-shadow:0 0 0 4px rgba(255,107,27,.10);
}

.input-wrap i{
    width:24px;
    min-width:24px;
    text-align:center;
    color:#9ca7bc;
    font-size:20px;
}

.input-wrap input{
    width:100%;
    height:57px!important;
    margin-left:16px;

    border:none !important;
    outline:none;
    box-shadow:none;

    background:transparent;

    appearance:none;
    -webkit-appearance:none;
margin-top:10px;
    font-size:16px;
    color:#102b73;
}

.input-wrap input::placeholder{
    color:#b8c2d4;
}

.doc-form button{
    width:180px;
    border:none;
    border-radius:18px;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;

    font-size:20px;
    font-weight:600;
    color:#fff;

    transition:
        transform .12s ease-out,
        filter .12s ease-out;
}

.coa .doc-form button{
    background:#2954ff;
}

.sds .doc-form button{
    background:#ff6b1b;
}

.doc-form button:hover{
    transform:translateY(-1px);
    filter:brightness(1.03);
}

/*======================================
Help
======================================*/

.doc-help{
    margin-top:30px;
    padding:20px 24px;
    border-radius:18px;
    background:#f7f9fe;

    display:flex;
    align-items:center;
    gap:16px;

    color:#5d6983;
    font-size:17px;
}

.doc-help i{
    font-size:22px;
}

.coa .doc-help i,
.coa .doc-help strong{
    color:#2954ff;
}

.sds .doc-help i,
.sds .doc-help strong{
    color:#ff6b1b;
}

/*======================================
Bottom
======================================*/

.doc-bottom{
    margin-top:50px;
    padding:30px 40px;

    background:#fff;
    border:1px solid #edf2fa;
    border-radius:24px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    box-shadow:0 10px 30px rgba(23,49,115,.05);
}

.doc-bottom-left{
    display:flex;
    align-items:center;
    gap:20px;
}

.doc-bottom-left i{
    width:70px;
    height:70px;

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

    border-radius:50%;

    background:#eef3ff;
    color:#2954ff;
    font-size:28px;
}

.doc-bottom-left h4{
    margin:0 0 8px;
    font-size:30px;
    color:#102b73;
}

.doc-bottom-left p{
    margin:0;
    color:#68758f;
}

.doc-features{
    display:flex;
    gap:50px;
}

.doc-features div{
    display:flex;
    align-items:center;
    gap:14px;

    color:#102b73;
    font-weight:600;
}

.doc-features i{
    font-size:24px;
    color:#2954ff;
}
/*======================================
Documentation Reveal
======================================*/

/* Initial states */

.reveal-left{
    opacity:0;
    transform:translateX(-80px);
}

.reveal-right{
    opacity:0;
    transform:translateX(80px);
}

/* Visible */

.reveal-left.is-visible,
.reveal-right.is-visible{
    opacity:1;
    transform:translateX(0);
}

/* Smooth transition */

.doc-card.reveal{
    transition:
        opacity .75s cubic-bezier(.22,1,.36,1),
        transform .75s cubic-bezier(.22,1,.36,1);
}

/* Delay second card slightly */

.doc-card.sds{
    transition-delay:.18s;
}

/* Bottom panel */

.doc-bottom.reveal{
    opacity:0;
    transform:translateY(50px);
    transition:
        opacity .7s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1);
}

.doc-bottom.reveal.is-visible{
    opacity:1;
    transform:translateY(0);
}
/*======================================
Responsive
======================================*/

@media(max-width:991px){

.doc-search-grid{
    flex-direction:column;
}

.doc-top{
    flex-direction:column;
    text-align:center;
}

.doc-form{
    flex-direction:column;
}

.doc-form button{
    width:100%;
    height:64px;
}

.doc-bottom{
    flex-direction:column;
    gap:30px;
    text-align:center;
}

.doc-bottom-left{
    flex-direction:column;
}

.doc-features{
    flex-direction:column;
    gap:20px;
}

}

@media(max-width:576px){

.doc-card{
    padding:26px;
}

.doc-content h3{
    font-size:34px;
}

.doc-content p{
    font-size:16px;
}

.doc-icon{
    width:90px;
    height:90px;
}

.doc-icon i{
    font-size:38px;
}

.input-wrap{
    height:60px;
}

.doc-help{
    font-size:15px;
}

.doc-bottom{
    padding:24px;
}

.doc-bottom-left h4{
    font-size:24px;
}

}

.doc-search-live{
    position:relative;
}

#coa-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    width:100%;

    background:#fff;
    border:1px solid #e8edf7;
    border-radius:18px;

    box-shadow:0 18px 40px rgba(16,43,115,.08);

    overflow:hidden;

    display:none;

    z-index:999;
}

#coa-dropdown.active{
    display:block;
}

.coa-item{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:18px;

    padding:18px 22px;

    cursor:pointer;

    transition:.15s;
}

.coa-item:hover{
    background:#f7faff;
}

.coa-item:not(:last-child){
    border-bottom:1px solid #edf2fa;
}

.coa-left{
    display:flex;
    align-items:center;
    gap:16px;
}

.coa-icon{
    width:48px;
    height:48px;

    border-radius:14px;

    background:#eef3ff;
    color:#2954ff;

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

    flex-shrink:0;
}

.coa-title{
    font-size:16px;
    font-weight:600;
    color:#102b73;
    margin-bottom:4px;
}

.coa-subtitle{
    font-size:14px;
    color:#7d879d;
}

.coa-download{
    color:#2954ff;
    font-size:18px;
}

.coa-loading,
.coa-empty{
    padding:18px 22px;
    color:#7d879d;
    font-size:15px;
}

/*======================================
SDS Live Search
======================================*/

.sds-search-live{
    position:relative;
}

#sds-dropdown{
    position:absolute;
    top:calc(100% + 10px);
    left:0;
    width:100%;

    background:#fff;
    border:1px solid #ffe2d5;
    border-radius:18px;

    box-shadow:0 18px 40px rgba(255,107,27,.10);

    overflow:hidden;

    display:none;

    z-index:999;
}

#sds-dropdown.active{
    display:block;
}

.sds-item{
    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:18px;

    padding:18px 22px;

    cursor:pointer;

    transition:.15s;
}

.sds-item:hover{
    background:#fff8f5;
}

.sds-item:not(:last-child){
    border-bottom:1px solid #fff0e8;
}

.sds-left{
    display:flex;
    align-items:center;
    gap:16px;
}

.sds-icon{
    width:48px;
    height:48px;

    border-radius:14px;

    background:#fff2ea;
    color:#ff6b1b;

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

    flex-shrink:0;
}

.sds-title{
    font-size:16px;
    font-weight:600;
    color:#102b73;
    margin-bottom:4px;
}

.sds-subtitle{
    font-size:14px;
    color:#7d879d;
}

.sds-download{
    width:42px;
    height:42px;

    border-radius:12px;

    background:#ff6b1b;
    color:#fff;

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

    text-decoration:none;

    transition:.15s;
}

.sds-item:hover .sds-download{
    background:#f25b07;
    transform:translateX(3px);
}

.sds-loading,
.sds-empty{
    padding:18px 22px;
    color:#7d879d;
    font-size:15px;
}

.sds-loading i{
    color:#ff6b1b;
    margin-right:8px;
}

.sds-empty i{
    color:#ff6b1b;
    margin-right:8px;
}