/* =========================================================
     MPX THEME (Dark + Gold + Blue Glow)
     ========================================================= */
  :root{
    --mpx-bg0:#06080c;
    --mpx-bg1:#090d14;
    --mpx-bg2:#0b1220;
    --mpx-card:#0b1018;
    --mpx-card2:#0d1420;
	--mpx-card3:#B18910;
    --mpx-border:rgba(255,255,255,.08);
    --mpx-border2:rgba(255,255,255,.12);

    --mpx-gold:#FFC92D;
    --mpx-gold2:#FFDD66;

    --mpx-blue:#1D6CFF;
    --mpx-blue2:#2CA8FF;

    --mpx-text:#EAF0FF;
    --mpx-muted:rgba(234,240,255,.72);

    --mpx-radius:18px;
    --mpx-radius2:22px;

    --mpx-shadow: 0 22px 70px rgba(0,0,0,.55);
    --mpx-shadow2: 0 10px 30px rgba(0,0,0,.55);

    --mpx-glowBlue: 0 0 0 1px rgba(29,108,255,.25), 0 0 26px rgba(29,108,255,.22), 0 0 62px rgba(44,168,255,.14);
    --mpx-glowGold: 0 0 0 1px rgba(255,201,45,.25), 0 0 18px rgba(255,201,45,.18), 0 0 40px rgba(255,201,45,.10);

    --mpx-font: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

    /* =========================================================
       ADD-ON MOTION TOKENS (EDITABLE)
       - safe to ignore; used by new helpers below
       ========================================================= */
    --mpx-ease: cubic-bezier(.2,.9,.2,1);
    --mpx-speed: 520ms;
  }

  /* Scope everything to avoid conflicts with your theme */
  #mpxIndex{
    font-family: var(--mpx-font);
    color: var(--mpx-text);
    background:
      radial-gradient(1200px 600px at 25% -10%, rgba(29,108,255,.18), transparent 60%),
      radial-gradient(900px 500px at 80% 0%, rgba(255,201,45,.10), transparent 65%),
      linear-gradient(180deg, var(--mpx-bg0), var(--mpx-bg1) 40%, var(--mpx-bg0));
  }

  #mpxIndex .mpx-wrap{
    position: relative;
    overflow: hidden;
  }

  #mpxIndex .mpx-section{
    position: relative;
    padding: 70px 0;
  }

  #mpxIndex .mpx-container{
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 18px;
  }

  /* subtle moving background on sections (JS parallax uses data attributes) */
  #mpxIndex .mpx-parallax-event{
    position: absolute;
    inset: 20px -60px -20px -60px; 
    background-size: 1600px auto;
    opacity: .25;
    pointer-events: none;
    transform: translate3d(0,0,0);
    will-change: transform;
    filter: saturate(1.05);
  }

  #mpxIndex .mpx-parallax2{
    position: absolute;
    inset: 20px -60px -20px -60px; 
    background-size: 1800px auto;
    opacity: .25;
    pointer-events: none;
    transform: translate3d(0,0,0);
    will-change: transform;
    filter: saturate(1.05);
  }

  #mpxIndex .mpx-parallax{
    position: absolute;
    inset: -80px -60px -40px -60px;
    background-repeat: repeat;
    background-size: 920px auto;
    opacity: .14;
    pointer-events: none;
    transform: translate3d(0,0,0);
    will-change: transform;
    filter: saturate(1.05);
  }

  #mpxIndex .mpx-hdr-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom: 12px;
  }

  #mpxIndex .mpx-kicker{
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: rgba(255,255,255,.62);
    display:flex;
    align-items:center;
    gap:6px;
  }
  #mpxIndex .mpx-kicker::before{
    content:"";
    width:10px;height:10px;
    background: var(--mpx-gold);
    box-shadow: var(--mpx-glowGold);
    border-radius: 3px;
    display:inline-block;
  }

  #mpxIndex .mpx-tabs{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }
/* =========================================================
   RESPONSIVE: HIDE TABS ON MOBILE
   ========================================================= */
@media (max-width: 768px) {
    #mpxIndex .mpx-tabs {
        display: none !important;
    }
}
  #mpxIndex .mpx-tab{
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .12em;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid var(--mpx-border);
    color: rgba(255,255,255,.72);
    background: rgba(255,255,255,.02);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
    user-select:none;
    cursor:pointer;
    white-space:nowrap;
  }
  #mpxIndex .mpx-tab.is-active{
    color: #0b1220;
    background: linear-gradient(135deg, var(--mpx-gold), var(--mpx-gold2));
    border-color: rgba(255,201,45,.45);
    box-shadow: var(--mpx-glowGold);
  }
  #mpxIndex .mpx-tab:hover{
    transform: translateY(-1px);
    border-color: rgba(255,255,255,.16);
  }

  #mpxIndex .mpx-title{
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: clamp(42px, 4.6vw, 62px);
    color: var(--mpx-gold);
    margin: 0 0 18px;
    line-height: 1.02;
	text-shadow: 0 0 80px rgba(255, 201, 45, 0.3);
  }
  #mpxIndex .mpx-title.center{ text-align:center; }

  #mpxIndex .mpx-sub{
    color: var(--mpx-muted);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
  }

  /* =========================================================
     CARDS / EFFECTS
     ========================================================= */
  #mpxIndex .mpx-card{
    background: linear-gradient(180deg, rgba(0,0,0,.75), rgba(12,13,15,.95));
    border: 1px solid var(--mpx-border);
    border-radius: var(--mpx-radius);
    box-shadow: var(--mpx-shadow2);
  }

  #mpxIndex .mpx-card-bio{
    background: linear-gradient(0deg, rgba(0,0,0,13.80),  rgba(11,12,13,0.80), rgba(0,0,0,0.80));
    border: 1px solid var(--mpx-border);
    border-radius: var(--mpx-radius);
    box-shadow: var(--mpx-shadow2);
  }


  #mpxIndex .mpx-hover{
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  }
  #mpxIndex .mpx-hover:hover{
    transform: translateY(-4px);
    border-color: rgba(255,255,255,.14);
    box-shadow: var(--mpx-shadow), var(--mpx-glowBlue);
  }

  #mpxIndex .mpx-btn{
    appearance:none;
    border:0;
    outline:0;
    cursor:pointer;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
    user-select:none;
  }

  #mpxIndex .mpx-btn-col2{
    appearance:none;
    border:0;
    outline:0;
    cursor:pointer;
    border-radius: 8px;
    padding: 12px 16px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 12px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
    user-select:none;
  }


  #mpxIndex .mpx-btn:active{ transform: translateY(1px) scale(.99); }

  #mpxIndex .mpx-btn-primary{
    background: linear-gradient(135deg, var(--mpx-gold), var(--mpx-gold2));
    color: #0b1220;
    box-shadow: var(--mpx-glowGold);
  }
  #mpxIndex .mpx-btn-primary:hover{ filter: brightness(1.04); }

  #mpxIndex .mpx-btn-ghost{
    background: rgba(236,183,0,.02);
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.86);
	border-radius: 10px;
  }
  #mpxIndex .mpx-btn-ghost:hover{
    box-shadow: var(--mpx-glowGold);
    border-color: rgba(255,229,0,0.32);
	background: #0f0f0f;
	background:  linear-gradient(to right top, #111110, #0f0f0e, #0d0c0c, #090909, #060606, #070707, #080708, #090808, #0e0c0c, #000, #000, #161614); 
	  }
 .mpx-btn-center{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
  /* =========================================================
     NEXT EVENT (framed image + 3 cards under)
     ========================================================= */
  #mpxIndex .mpx-event-hero{
    position: relative;
    border-radius: var(--mpx-radius2);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--mpx-shadow), var(--mpx-glowBlue);
    background: #0a0f18;
  }
  #mpxIndex .mpx-event-hero .mpx-event-media{
    position: relative;
    aspect-ratio: 16 / 7;
    min-height: 240px;
    overflow:hidden;
    background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.45));
  }
  #mpxIndex .mpx-event-hero img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
    transform: scale(1.02);
    filter: contrast(1.05) saturate(1.06);
  }
  #mpxIndex .mpx-event-hero .mpx-event-shade{
    position:absolute; inset:0;
    background:
      radial-gradient(700px 260px at 30% 40%, rgba(29,108,255,.10), transparent 60%),
      radial-gradient(650px 260px at 85% 35%, rgba(255,201,45,.10), transparent 62%),
      linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.62));
    pointer-events:none;
  }

  /* BRACKET FRAME (NO CIRCLES) */
  #mpxIndex .mpx-bracket{
    position:absolute;
    width: 74px;
    height: 74px;
    border: 3px solid rgba(29,108,255,.9);
    filter: drop-shadow(0 0 10px rgba(29,108,255,.35));
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 26px rgba(29,108,255,.22);
    pointer-events:none;
  }
  #mpxIndex .mpx-bracket.tl{ top:18px; left:18px; border-right:0; border-bottom:0; border-radius: 10px 0 0 0; }
  #mpxIndex .mpx-bracket.tr{ top:18px; right:18px; border-left:0; border-bottom:0; border-radius: 0 10px 0 0; }
  #mpxIndex .mpx-bracket.bl{ bottom:18px; left:18px; border-right:0; border-top:0; border-radius: 0 0 0 10px; }
  #mpxIndex .mpx-bracket.br{ bottom:18px; right:18px; border-left:0; border-top:0; border-radius: 0 0 10px 0; }

  /* mid “notches” like your reference */
  #mpxIndex .mpx-bracket.ml,
  #mpxIndex .mpx-bracket.mr{
    width: 58px;
    height: 58px;
    top: 50%;
    transform: translateY(-50%);
  }
  #mpxIndex .mpx-bracket.ml{ left:14px; border-right:0; border-top:0; border-bottom:0; border-radius: 10px 0 0 10px; }
  #mpxIndex .mpx-bracket.mr{ right:14px; border-left:0; border-top:0; border-bottom:0; border-radius: 0 10px 10px 0; }

  #mpxIndex .mpx-event-cta{
    position:absolute;
    left: 34px;
    bottom: 28px;
    z-index: 3;
  }
  #mpxIndex .mpx-event-cta .mpx-btn{
    padding: 12px 26px;
    border-radius: 12px;
    box-shadow: var(--mpx-glowGold), var(--mpx-shadow2);
    background: rgba(1,1,0,.72);
    border: 1px solid rgba(29,108,255,.35);
    color: rgba(255,255,255,.90);
    backdrop-filter: blur(10px);
  }
  #mpxIndex .mpx-event-cta .mpx-btn b{
    color: var(--mpx-gold);
    font-weight: 900;
  }
  #mpxIndex .mpx-event-cta .mpx-btn:hover{
    border-color: rgba(29,108,255,.55);
    transform: translateY(-2px);
  }

  #mpxIndex .mpx-event-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 18px;
  }

  #mpxIndex .mpx-mini{
    padding: 16px 16px 14px;
    display:flex;
    align-items:center;
    gap:14px;
  }
  #mpxIndex .mpx-mini .mpx-ic{
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(29,108,255,.10);
    border: 1px solid rgba(29,108,255,.25);
    box-shadow: var(--mpx-glowBlue);
    display:grid;
    place-items:center;
    color: var(--mpx-gold);
    font-weight: 900;
  }
  #mpxIndex .mpx-mini h4{
    margin:0;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
    color: rgba(255,255,255,.92);
  }
  #mpxIndex .mpx-mini p{
    margin:2px 0 0;
    font-size: 12px;
    color: rgba(255,255,255,.62);
    line-height: 1.35;
  }

@media (max-width: 768px) {
  #mpxIndex .mpx-event-hero .mpx-event-media {
    aspect-ratio: 4 / 3;  /* taller than the default 16/7 */
    min-height: 280px;
  }
  
  #mpxIndex .mpx-event-hero .mpx-event-media img {
    object-position: center 20%;  /* shifts up slightly to show faces better */
  }
}

/* =========================================================
   VERTICAL BUTTONS (RIGHT ALIGNED WITH 14px GAP)
   ========================================================= */

#mpxIndex .mpx-mini {
    position: relative;    /* Required for absolute positioning of the button */
    padding-right: 60px;   /* Creates room so text doesn't overlap the button */
    overflow: hidden;      /* Keeps the button contained */
    min-height: 100px;     /* Ensures card is tall enough for vertical button */
}

#mpxIndex .mpx-mini .mpx-mini-cta {
    position: absolute;
    right: 14px;           /* The 14px gap from the right edge */
    top: 0;
    bottom: 0;
    width: 32px;           /* The 'thickness' of the vertical track */
    display: flex;
    align-items: center;
    justify-content: center;
}

#mpxIndex .mpx-mini .mpx-mini-cta .mpx-btn {
    /* Layout & Rotation */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;          /* This becomes the vertical height */
    height: 18px;          /* This becomes the vertical width */
    transform: rotate(-90deg);
    transform-origin: center;
    white-space: nowrap;
    text-decoration: none; /* Removes link underline */
    
    /* Typography */
    font-size: 11px;
    font-weight: 500;            /* Medium weight */
    letter-spacing: -0.02em;     /* Tightened letter spacing */
    text-transform: uppercase;
    
    /* Aesthetics */
    background: var(--mpx-gold);
    color: #000;
    border-radius: 6px;
    border: none;
    transition: all 0.3s ease;
}

#mpxIndex .mpx-mini .mpx-mini-cta .mpx-btn:hover {
    background: #ffffff;
    transform: rotate(-90deg) scale(1.05);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* HIDE TABS ON MOBILE */
@media (max-width: 768px) {
    #mpxIndex .mpx-tabs {
        display: none !important;
    }
}

  /* =========================================================
     BOXING CAREER (title + image + bio card + 3 pills)
     ========================================================= */
  #mpxIndex .mpx-career-row{
    display:grid;
    grid-template-columns: 1.05fr 1.35fr;
    gap: 18px;
    align-items: stretch;
    margin-top: 14px;
  }
  #mpxIndex .mpx-career-media{
    border-radius: var(--mpx-radius2);
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--mpx-shadow2);
    min-height: 180px;
  }
  #mpxIndex .mpx-career-media img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
    filter: saturate(1.07) contrast(1.04);
  }
  #mpxIndex .mpx-bio-card{
    padding: 18px;
    display:flex;
    gap: 16px;
    align-items: stretch;
  }
  #mpxIndex .mpx-bio-left{
    flex: 1 1 auto;
    min-width: 0;
  }
  #mpxIndex .mpx-bio-title{
    margin: 0 0 8px;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
  }
  #mpxIndex .mpx-bio-text{
    margin:0;
    color: rgba(255,255,255,.68);
    font-size: 13px;
    line-height: 1.7;
  }
  #mpxIndex .mpx-bio-pills{
    flex: 0 0 210px;
    display:flex;
    flex-direction: column;
    gap: 10px;
    align-self: center;
  }
  #mpxIndex .mpx-pill{
    display:flex;
    align-items:center;
    gap:10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    color: rgba(255,255,255,.82);
    font-size: 12px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    cursor:pointer;
    user-select:none;
  }
  #mpxIndex .mpx-pill i{
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: rgba(255,201,45,.12);
    border: 1px solid rgba(255,201,45,.22);
    box-shadow: var(--mpx-glowGold);
    display:inline-block;
  }
  #mpxIndex .mpx-pill:hover{
    transform: translateY(-2px);
    border-color: rgba(29,108,255,.28);
    box-shadow: var(--mpx-glowBlue);
  }

  /* =========================================================
     CAREER HUB (MATCH SCREENSHOT: IMAGE + CONTENT + RIGHT TABS)
     ========================================================= */
  #mpxIndex .mpx-career-hub{
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 1.45fr .60fr;
    gap: 0;
    border-radius: var(--mpx-radius2);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--mpx-shadow), var(--mpx-glowGold);
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
    min-height: 260px;
  }

  #mpxIndex .mpx-career-hub::after{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(720px 300px at 25% 35%, rgba(29,108,255,.10), transparent 62%),
      radial-gradient(720px 300px at 75% 35%, rgba(255,201,45,.08), transparent 62%),
      linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.70) 52%, rgba(0,0,0,.80));
    pointer-events:none;
  }

  #mpxIndex .mpx-career-hero{
    position: relative;
    min-height: 260px;
	min-height: 300px;
    background: rgba(255,255,255,.02);
  }
  #mpxIndex .mpx-career-hero img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
    transform: scale(1.04);
    filter: contrast(1.05) saturate(1.06);
  }
  #mpxIndex .mpx-career-hero::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.55));
    pointer-events:none;
  }

  #mpxIndex .mpx-career-1{
    position: relative;
    z-index: 1;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
	background-color: #000000;
	opacity: 1.0;
  }
  #mpxIndex .mpx-career-kicker{
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,214,0,0.99);
    margin-bottom: 8px;
  }
  #mpxIndex .mpx-career-title{
    margin: 0 0 10px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: rgba(255,255,255,.92);
    font-size: clamp(18px, 2.1vw, 26px);
  }
  #mpxIndex .mpx-career-text{
    margin: 0 0 16px;
    color: rgba(255,255,255,.66);
    font-size: 13px;
    line-height: 1.75;
    max-width: 520px;
  }
  #mpxIndex .mpx-career-btn{
    width: fit-content;
    border-radius: 5px;
    padding: 12px 18px;
  }

  /* Right vertical tabs */
  #mpxIndex .mpx-career-tabs{
    position: relative;
    z-index: 1;
    padding: 22px 18px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    border-left: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.22);
    backdrop-filter: blur(10px);
  }

  #mpxIndex .mpx-career-tab{
    appearance:none;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.02);
    color: rgba(255,255,255,.84);
    border-radius: 14px;
    padding: 14px 14px;
    text-align: left;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: 11px;
    cursor:pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
  }
  #mpxIndex .mpx-career-tab:hover{
    transform: translateY(-2px);
    border-color: rgba(255,201,45,.50);
    box-shadow: var(--mpx-glowGold);
  }
  #mpxIndex .mpx-career-tab.is-active{
    background: linear-gradient(135deg, var(--mpx-gold), var(--mpx-gold2));
    color: #0b1220;
    border-color: rgba(255,201,45,.50);
    box-shadow: var(--mpx-glowGold);
  }

  /* Switch animation */
  #mpxIndex .mpx-career-hub.is-switching .mpx-career-1{
    opacity: .05;
    transform: translateY(6px);
    transition: opacity .16s ease, transform .16s ease; 
  }
  #mpxIndex .mpx-career-hub.is-switching .mpx-career-hero img{
    opacity: .35;
    transition: opacity .16s ease;
  }

  /* =========================================================
     PROFILE DATA + RANKING (MID CARD)
     ========================================================= */
  #mpxIndex .mpx-profile-card{
    padding: 16px;
    display:flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
  }

  #mpxIndex .mpx-profile-h{
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    color: rgba(255,255,255,.80);
    margin: 0 0 2px;
  }

  #mpxIndex .mpx-pd-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  #mpxIndex .mpx-pd-item{
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
  }
  #mpxIndex .mpx-pd-lab{
    font-size: 11px;
    color: rgba(255,255,255,.62);
    text-transform: uppercase;
    letter-spacing: .10em;
  }
  #mpxIndex .mpx-pd-val{
    font-weight: 600;
    color: var(--mpx-gold);
    letter-spacing: .02em;
    font-size: 13px;
  }

  #mpxIndex .mpx-rank-grid{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
  }
  #mpxIndex .mpx-rank{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    padding: 10px 10px;
    text-align:center;
  }
  #mpxIndex .mpx-rank span{
    display:block;
    font-size: 10px;
    color: rgba(255,255,255,.60);
    letter-spacing: .12em;
    text-transform: uppercase;
  }
  #mpxIndex .mpx-rank b{
    display:block;
    margin-top: 4px;
    font-weight: 900;
    color: rgba(255,255,255,.92);
  }

  #mpxIndex .mpx-profile-btn{
    width: 100%;
    justify-content: center;
    border-radius: 14px;
    margin-top: 2px;
  }

  /* Responsive tweaks */
  @media (max-width: 992px){
    #mpxIndex .mpx-career-hub{
      grid-template-columns: 1fr;
    }
    #mpxIndex .mpx-career-tabs{
      flex-direction: row;
      border-left: 0;
      border-top: 1px solid rgba(255,255,255,.10);
      justify-content: space-between;
    }
    #mpxIndex .mpx-career-tab{
      width: 100%;
      text-align: center;
    }
    #mpxIndex .mpx-rank-grid{
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* =========================================================
     STATS & DATA / PERFORMANCE SNAPSHOT (3-column like image)
     ========================================================= */
  #mpxIndex .mpx-stat-hdr{
    margin-top: 34px;
    padding-top: 10px;
  }
  #mpxIndex .mpx-mini-h{
    color: rgba(255,255,255,.56);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .16em;
    margin: 0 0 8px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  #mpxIndex .mpx-mini-h::before{
    content:"";
    width: 6px; height: 6px;
    background: var(--mpx-gold);
    border-radius: 2px;
    box-shadow: var(--mpx-glowGold);
  }
  #mpxIndex .mpx-h2{
    font-weight: 900;
    letter-spacing: .02em;
    font-size: 18px;
    margin: 0 0 8px;
    color: rgba(255,255,255,.90);
  }
  #mpxIndex .mpx-hint{
    margin: 0 0 14px;
    color: rgba(255,255,255,.58);
    font-size: 12px;
    line-height: 1.6;
  }

  #mpxIndex .mpx-snap-grid{
    display:grid;
    grid-template-columns: 1.4fr .9fr .75fr;
    gap: 18px;
    align-items: stretch;
    margin-top: 16px;
  }

  #mpxIndex .mpx-snap-left{
    padding: 16px;
  }
  #mpxIndex .mpx-kpis{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-bottom: 14px;
  }
  #mpxIndex .mpx-kpi{
    padding: 10px 10px 9px;
    border-radius: 14px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.10);
    text-align:center;
  }
  #mpxIndex .mpx-kpi .v{
    font-weight: 900;
    color: rgba(255,255,255,.92);
    font-size: 13px;
  }
  #mpxIndex .mpx-kpi .l{
    margin-top: 3px;
    color: rgba(255,255,255,.56);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .12em;
  }

  #mpxIndex .mpx-bars h5{
    margin: 10px 0 6px;
    font-size: 11px;
    letter-spacing:.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,.76);
  }
  #mpxIndex .mpx-bar{
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.10);
    overflow:hidden;
    position: relative;
  }
  #mpxIndex .mpx-bar > span{
    display:block;
    height:100%;
    width: 0%;
    background: linear-gradient(90deg, var(--mpx-gold), var(--mpx-gold2));
    box-shadow: 0 0 18px rgba(255,201,45,.18);
    border-radius: 999px;
    transition: width 1.1s cubic-bezier(.2,.9,.2,1);
  }
  #mpxIndex .mpx-bar .pct{
    position:absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: rgba(0,0,0,.99);
    letter-spacing:.08em;
  }

  #mpxIndex .mpx-snap-mid{
    padding: 16px;
    display:flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
  }
  #mpxIndex .mpx-mid-title{
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: 11px;
    color: rgba(255,255,255,.80);
    margin: 0;
  }
  #mpxIndex .mpx-mid-text{
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.65;
    color: rgba(255,255,255,.62);
  }
  #mpxIndex .mpx-snap-mid .mpx-btn{
    width: 100%;
    justify-content: center;
    border-radius: 12px;
  }

  #mpxIndex .mpx-snap-right{
    border-radius: var(--mpx-radius2);
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--mpx-shadow2), var(--mpx-glowGold);
    position: relative;
  }
  #mpxIndex .mpx-snap-right img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
    filter: saturate(1.05) contrast(1.02);
  }
  #mpxIndex .mpx-snap-right::after{
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,.00), rgba(0,0,0,.55));
    pointer-events:none;
  }

  /* =========================================================
     MP PROMOTIONS (title with left accent line + 3 fighter cards)
     ========================================================= */
  #mpxIndex .mpx-title-line{
    display:flex;
    align-items:center;
    gap: 12px;
    margin-bottom: 12px;
  }
  #mpxIndex .mpx-title-line .bar{
    width: 2px;
    height: 22px;
    background: linear-gradient(180deg, rgba(255,201,45,.9), rgba(29,108,255,.45));
    box-shadow: var(--mpx-glowGold);
  }
  #mpxIndex .mpx-title-line h3{
    margin:0;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing:.02em;
    color: var(--mpx-gold);
    font-size: clamp(30px, 3.1vw, 46px);
  }

  #mpxIndex .mpx-grid-3{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 18px;
  }

  #mpxIndex .mpx-fighter{
    overflow:hidden;
  }
  #mpxIndex .mpx-fighter .img{
    aspect-ratio: 16 / 9;
    overflow:hidden;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
  }
  #mpxIndex .mpx-fighter .img img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
    transform: scale(1.03);
  }
  #mpxIndex .mpx-fighter .b{
    padding: 14px;
    text-align:center;
  }
  #mpxIndex .mpx-fighter .name{
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12px;
    margin: 0 0 10px;
    color: rgba(255,255,255,.92);
  }
  #mpxIndex .mpx-fighter .meta{
    font-size: 12px;
    color: rgba(255,255,255,.62);
    margin: 0 0 10px;
  }
  #mpxIndex .mpx-fighter .badges{
    display:flex;
    justify-content:center;
    gap: 10px;
    flex-wrap:wrap;
  }
  #mpxIndex .mpx-badge{
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.02);
    font-size: 11px;
    color: rgba(255,255,255,.78);
    text-transform: uppercase;
    letter-spacing: .08em;
  }

  /* =========================================================
     GLOBAL EXPERT TEAM (like reference)
     ========================================================= */
  #mpxIndex .mpx-two{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    align-items:center;
  }
  #mpxIndex .mpx-two2{
    display:grid;
    grid-template-columns: .8fr 1.2fr;
    gap: 18px;
    align-items:center;
  }

    #mpxIndex .mpx-two2{ grid-template-columns: 1fr; }
  #mpxIndex .mpx-tag{
    display:inline-flex;
    align-items:center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(29,108,255,.12);
    border: 1px solid rgba(29,108,255,.26);
    color: rgba(255,255,255,.82);
    font-size: 11px;
    letter-spacing:.12em;
    text-transform: uppercase;
    box-shadow: var(--mpx-glowBlue);
    margin-bottom: 12px;
  }
  #mpxIndex .mpx-team-h{
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-size: clamp(22px, 2.6vw, 34px);
    margin: 0 0 10px;
    color: rgba(255,255,255,.94);
    line-height: 1.05;
  }
  #mpxIndex .mpx-team-p{
    margin: 0 0 14px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    line-height: 1.75;
  }
  #mpxIndex .mpx-team-img{
    border-radius: var(--mpx-radius2);
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: var(--mpx-shadow2);
  }
  #mpxIndex .mpx-team-img img{ width:100%; height:auto; display:block; object-fit:cover; }

  /* =========================================================
     SHOP APPAREL (3 cards + featured product + tabs)
     ========================================================= */
  #mpxIndex .mpx-underline{
    width: 34px;
    height: 3px;
    background: linear-gradient(90deg, var(--mpx-gold), rgba(29,108,255,.55));
    border-radius: 999px;
    margin: 10px auto 0;
    box-shadow: var(--mpx-glowGold);
  }

  #mpxIndex .mpx-shop-grid{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 22px;
  }
  #mpxIndex .mpx-shop-card{
    padding: 0;
    overflow:hidden;
  }
  #mpxIndex .mpx-shop-top{
    padding: 12px 14px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
  }
  #mpxIndex .mpx-price-tab{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-weight: 900;
    color: #0b1220;
    padding: 8px 12px;
    border-radius: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 11px;
  }
  #mpxIndex .tab-blue{ background: linear-gradient(135deg, #31A2FF, #1D6CFF); box-shadow: var(--mpx-glowBlue); }
  #mpxIndex .tab-gold{ background: linear-gradient(135deg, var(--mpx-gold), var(--mpx-gold2)); box-shadow: var(--mpx-glowGold); }
  #mpxIndex .tab-teal{ background: linear-gradient(135deg, #20E3B2, #1DB4FF); box-shadow: var(--mpx-glowBlue); }

  #mpxIndex .mpx-shop-body{
    padding: 14px;
  }
  #mpxIndex .mpx-shop-body h4{
    margin: 0 0 6px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing:.10em;
    font-size: 12px;
    color: rgba(255,255,255,.92);
  }
  #mpxIndex .mpx-shop-body .desc{
    margin: 0 0 10px;
    font-size: 12px;
    color: rgba(255,255,255,.62);
    line-height: 1.6;
  }
  #mpxIndex .mpx-shop-list{
    list-style:none;
    margin: 0;
    padding: 0;
    display:flex;
    flex-direction: column;
    gap: 8px;
  }
  #mpxIndex .mpx-shop-list li{
    display:flex;
    align-items:center;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    color: rgba(255,255,255,.78);
    font-size: 12px;
  }
  #mpxIndex .mpx-shop-list b{
    color: var(--mpx-gold);
    font-weight: 900;
  }

  /* featured product */
  #mpxIndex .mpx-feature{
    margin-top: 22px;
    padding: 16px;
  }
  #mpxIndex .mpx-feature-grid{
    display:grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 16px;
    align-items: stretch;
  }
  #mpxIndex .mpx-gallery{
    display:grid;
    grid-template-columns: 64px 1fr;
    gap: 12px;
    align-items: stretch;
  }
  #mpxIndex .mpx-thumbs{
    display:flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
  }
  #mpxIndex .mpx-thumb{
    width: 64px;
    height: 64px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.02);
    overflow:hidden;
    cursor:pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    display:grid;
    place-items:center;
  }
  #mpxIndex .mpx-thumb img{
    width:100%;
    height:100%;
    object-fit: cover;
    display:block;
  }
  #mpxIndex .mpx-thumb.is-active{
    border-color: rgba(255,201,45,.35);
    box-shadow: var(--mpx-glowGold);
    transform: translateY(-2px);
  }

  #mpxIndex .mpx-mainshot{
    border-radius: var(--mpx-radius2);
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    box-shadow: var(--mpx-shadow2);
    display:flex;
    align-items:center;
    justify-content:center;
    min-height: 280px;
    position: relative;
  }
  #mpxIndex .mpx-mainshot img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
  }
  #mpxIndex .mpx-mainshot::after{
    content:"";
    position:absolute; inset:0;
    background: radial-gradient(600px 260px at 30% 40%, rgba(255,201,45,.09), transparent 60%),
                radial-gradient(560px 240px at 80% 30%, rgba(29,108,255,.10), transparent 60%);
    pointer-events:none;
  }

  #mpxIndex .mpx-prod h3{
    margin: 0 0 6px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: rgba(255,255,255,.92);
  }
  #mpxIndex .mpx-rating{
    font-size: 12px;
    color: rgba(255,255,255,.72);
    margin: 0 0 10px;
  }
  #mpxIndex .mpx-price{
    font-weight: 900;
    color: var(--mpx-gold);
    margin: 0 0 10px;
  }
  #mpxIndex .mpx-stock{
    font-size: 12px;
    color: rgba(255,255,255,.62);
    margin: 0 0 10px;
  }
  #mpxIndex .mpx-opts{
    display:flex;
    gap: 10px;
    flex-wrap:wrap;
    margin: 8px 0 12px;
  }
  #mpxIndex .mpx-chip{
    padding: 8px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.02);
    font-size: 11px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: rgba(255,255,255,.78);
    cursor:pointer;
    user-select:none;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  }
  #mpxIndex .mpx-chip.is-active{
    background: rgba(255,201,45,.12);
    border-color: rgba(255,201,45,.30);
    box-shadow: var(--mpx-glowGold);
    color: rgba(255,255,255,.90);
  }

  #mpxIndex .mpx-buyrow{
    display:flex;
    gap: 10px;
    align-items:center;
    margin: 10px 0 12px;
    flex-wrap:wrap;
  }
  #mpxIndex .mpx-qty{
    display:flex;
    align-items:center;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.02);
    border-radius: 12px;
    padding: 8px 10px;
  }
  #mpxIndex .mpx-qty button{
    width: 28px;
    height: 28px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.02);
    color: rgba(255,255,255,.84);
    cursor:pointer;
  }
  #mpxIndex .mpx-qty input{
    width: 44px;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.92);
    text-align:center;
    outline:none;
    font-weight: 900;
  }

  #mpxIndex .mpx-meta{
    margin-top: 8px;
    font-size: 12px;
    color: rgba(255,255,255,.62);
    line-height: 1.7;
  }

  /* tabs */
  #mpxIndex .mpx-tabs2{
    display:flex;
    gap: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 14px;
    padding-top: 12px;
    flex-wrap:wrap;
  }
  #mpxIndex .mpx-tab2{
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.02);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .10em;
    color: rgba(255,255,255,.72);
    cursor:pointer;
    user-select:none;
  }
  #mpxIndex .mpx-tab2.is-active{
    background: rgba(29,108,255,.12);
    border-color: rgba(29,108,255,.30);
    box-shadow: var(--mpx-glowBlue);
    color: rgba(255,255,255,.88);
  }
  #mpxIndex .mpx-panel{
    margin-top: 12px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    border-radius: 14px;
    padding: 12px;
    color: rgba(255,255,255,.64);
    font-size: 12px;
    line-height: 1.8;
  }

  /* =========================================================
     NEWS & FAQS (kept as requested)
     ========================================================= */
  #mpxIndex .mpx-nf-grid{
    display:grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 18px;
    margin-top: 18px;
  }
  #mpxIndex .mpx-news{
    padding: 16px;
  }
  #mpxIndex .mpx-news-list{
    display:flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
  }
  #mpxIndex .mpx-news-item{
    padding: 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
  }
  #mpxIndex .mpx-news-item .t{
    margin:0 0 6px;
    font-weight: 900;
    color: rgba(255,255,255,.90);
    font-size: 13px;
  }
  #mpxIndex .mpx-news-item .m{
    margin:0;
    color: rgba(255,255,255,.62);
    font-size: 12px;
    line-height: 1.6;
  }
  #mpxIndex .mpx-news-item .meta{
    margin-top: 8px;
    font-size: 11px;
    color: rgba(255,255,255,.50);
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  #mpxIndex .mpx-faq{
    padding: 16px;
  }
  #mpxIndex .mpx-acc{
    display:flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
  }
  #mpxIndex .mpx-q{
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    overflow:hidden;
  }
  #mpxIndex .mpx-q button{
    width: 100%;
    text-align:left;
    border:0;
    background: transparent;
    color: rgba(255,255,255,.90);
    padding: 12px 12px;
    font-weight: 900;
    letter-spacing: .02em;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 12px;
  }
  #mpxIndex .mpx-q button span{
    color: rgba(255,255,255,.90);
    font-size: 13px;
  }
  #mpxIndex .mpx-q button em{
    font-style: normal;
    color: var(--mpx-gold);
    font-weight: 900;
  }
  #mpxIndex .mpx-a{
    display:none;
    padding: 0 12px 12px;
    color: rgba(255,255,255,.62);
    font-size: 12px;
    line-height: 1.75;
  }
  #mpxIndex .mpx-q.is-open .mpx-a{ display:block; }
  #mpxIndex .mpx-q.is-open button{ border-bottom: 1px solid rgba(255,255,255,.08); }

  /* =========================================================
     Reveal animations
     ========================================================= */
  #mpxIndex .mpx-reveal{
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .6s ease, transform .6s ease;
  }
  #mpxIndex .mpx-reveal.is-in{
    opacity: 1;
    transform: translateY(0);
  }

  /* =========================================================
     Responsive
     ========================================================= */
  @media (max-width: 992px){
    #mpxIndex .mpx-event-grid{ grid-template-columns: 1fr; }
    #mpxIndex .mpx-career-row{ grid-template-columns: 1fr; }
    #mpxIndex .mpx-bio-card{ flex-direction: column; }
    #mpxIndex .mpx-bio-pills{ flex: 0 0 auto; }
    #mpxIndex .mpx-snap-grid{ grid-template-columns: 1fr; }
    #mpxIndex .mpx-kpis{ grid-template-columns: repeat(3, 1fr); }
    #mpxIndex .mpx-grid-3{ grid-template-columns: 1fr; }
    #mpxIndex .mpx-two{ grid-template-columns: 1fr; }
    #mpxIndex .mpx-shop-grid{ grid-template-columns: 1fr; }
    #mpxIndex .mpx-feature-grid{ grid-template-columns: 1fr; }
  }

  /* Smooth swap for the right-side Performance image */
  #mpxIndex #mpxCareerSideImg{
    transition: opacity .18s ease, transform .18s ease, filter .18s ease;
  }
  #mpxIndex .mpx-career-hub.is-switching + .mpx-stat-hdr #mpxCareerSideImg{
    opacity: .35;
    transform: scale(1.01);
    filter: saturate(1.05) contrast(1.05);
  }

  /* =====================================================================
     MPX ADD-ON EXTENSIONS (NEW UPDATES ADDED INTO YOUR CSS)
     - Designed to be NON-DESTRUCTIVE: only adds utilities + tab-panels
     - If you don’t use a feature, it won’t affect anything
     ===================================================================== */

  /* =========================================================
     A) ACCESSIBILITY + FOCUS (keyboard users)
     ========================================================= */
  #mpxIndex button:focus-visible,
  #mpxIndex a:focus-visible{
    outline: 2px solid rgba(255,201,45,.85);
    outline-offset: 2px;
    box-shadow: var(--mpx-glowGold);
    border-radius: 14px;
  }

  /* =========================================================
     B) GLASS + ACCENT EDGE UTILITIES
     HOW TO USE:
       <div class="mpx-card mpx-glass mpx-accent-edge">...</div>
     ========================================================= */
  #mpxIndex .mpx-glass{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  #mpxIndex .mpx-accent-edge{
    position: relative;
  }
  #mpxIndex .mpx-accent-edge::before{
    content:"";
    position:absolute;
    inset:-1px;
    pointer-events:none;
    background:
      radial-gradient(900px 220px at 15% 0%, rgba(255,201,45,.18), transparent 55%),
      radial-gradient(900px 260px at 92% 30%, rgba(29,108,255,.14), transparent 58%);
    opacity: 1;
  }

  /* =========================================================
     C) REVEAL COMPATIBILITY
     - Your current reveal uses .is-in
     - My latest JS uses .is-visible
     - This alias makes BOTH work with your existing CSS
     ========================================================= */
  #mpxIndex .mpx-reveal.is-visible{
    opacity: 1;
    transform: translateY(0);
  }

  /* Optional: reduced-motion safety */
  @media (prefers-reduced-motion: reduce){
    #mpxIndex .mpx-reveal{ transition:none !important; transform:none !important; opacity:1 !important; }
    #mpxIndex .mpx-hover{ transition:none !important; }
  }

  /* =========================================================
     D) CAREER HUB: TAB PANELS (BIO / RECORD / HIGHLIGHTS)
     IMPORTANT:
       - Only applies if you add these wrappers in your HTML:
         <div class="mpx-career-panels">
           <div class="mpx-career-panel is-active" data-panel="bio">...</div>
           <div class="mpx-career-panel" data-panel="record">...</div>
           <div class="mpx-career-panel" data-panel="highlights">...</div>
         </div>
       - JS toggles .is-active on the panel
     ========================================================= */
  #mpxIndex .mpx-career-panels{
    /* Keeps height stable when switching content */
    min-height: 160px; /* EDIT HERE if your copy is longer */
  }

  #mpxIndex .mpx-career-panel{
    display:none;
    animation: mpxCareerFadeIn 360ms var(--mpx-ease) both;
  }
  #mpxIndex .mpx-career-panel.is-active{ display:block; }

  @keyframes mpxCareerFadeIn{
    from{ opacity:0; transform: translateY(8px); }
    to{ opacity:1; transform: translateY(0); }
  }

  /* Small stats row inside the career panel (optional) */
  #mpxIndex .mpx-career-stats{
    display:grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
    margin-top: 12px;
  }
  #mpxIndex .mpx-career-stat{
    padding: 10px 12px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.02);
    display:flex;
    align-items:baseline;
    justify-content: space-between;
    gap: 10px;
  }
  #mpxIndex .mpx-career-stat b{
    color: rgba(255,255,255,.92);
    font-weight: 900;
    letter-spacing: .02em;
  }
  #mpxIndex .mpx-career-stat span{
    color: rgba(255,255,255,.58);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  @media (max-width: 560px){
    #mpxIndex .mpx-career-stats{ grid-template-columns: 1fr; }
  }

  /* =========================================================
     E) MP PROMOTIONS FIGHTERS: HOVER REVEAL (EXPAND CONTENT)
     HOW TO USE (example structure):
       <article class="mpx-card mpx-hover mpx-expand mpx-fighter">
         <div class="img">...</div>
         <div class="b">
           <h4 class="name">...</h4>
           <p class="meta">...</p>

           <div class="mpx-fighter-extra">
             <p class="extra-text">More content...</p>
             <a class="mpx-btn mpx-btn-primary">View Profile</a>
             <div class="mpx-social">
               <a class="mpx-social-btn" href="#">IG</a> ...
             </div>
           </div>
         </div>
       </article>
     ========================================================= */
  #mpxIndex .mpx-expand .mpx-fighter-extra{
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(6px);
    transition: max-height 420ms var(--mpx-ease), opacity 260ms var(--mpx-ease), transform 260ms var(--mpx-ease);
  }
  #mpxIndex .mpx-expand:hover .mpx-fighter-extra{
    max-height: 260px; /* EDIT HERE if you need more room */
    opacity: 1;
    transform: translateY(0);
  }

  #mpxIndex .mpx-fighter-extra .extra-text{
    margin: 10px 0 12px;
    color: rgba(255,255,255,.62);
    font-size: 12px;
    line-height: 1.6;
  }

  /* Social buttons row (optional) */
  #mpxIndex .mpx-social{
    display:flex;
    justify-content:center;
    gap: 10px;
    margin-top: 10px;
    flex-wrap:wrap;
  }
  #mpxIndex .mpx-social-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.02);
    color: rgba(255,255,255,.86);
    text-decoration:none;
    font-weight: 900;
    letter-spacing: .02em;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  #mpxIndex .mpx-social-btn:hover{
    transform: translateY(-2px);
    border-color: rgba(29,108,255,.30);
    box-shadow: var(--mpx-glowBlue);
  }

  /* =========================================================
     F) SHOP APPAREL: IMAGE ON TOP OF THE 3 SMALL CARDS (NEW)
     HOW TO USE (inside .mpx-shop-card):
       <div class="mpx-shop-media"><img src="..." alt=""></div>
       <div class="mpx-shop-top">...</div>
       <div class="mpx-shop-body">...</div>
     ========================================================= */
  #mpxIndex .mpx-shop-media{
    aspect-ratio: 16 / 9;
    min-height: 150px; /* EDIT HERE */
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
  }
  #mpxIndex .mpx-shop-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display:block;
    transform: scale(1.03);
    filter: saturate(1.06) contrast(1.04);
  }

  /* =========================================================
     G) OPTIONAL: CARD “EDGE GLOW” ON HOVER (GOLD + BLUE)
     Apply class .mpx-edgeglow to any card you want stronger glow on hover
     ========================================================= */
  #mpxIndex .mpx-edgeglow{
    position: relative;
  }
  #mpxIndex .mpx-edgeglow:hover{
    box-shadow: var(--mpx-shadow), var(--mpx-glowGold), var(--mpx-glowBlue);
    border-color: rgba(255,255,255,.16);
  }