/* ============================
MX HERO
============================ */
.hero-mx39{
background-image:url("../hero-led-visual-usa.webp");
}

.mx-hero{
height:55vh;
min-height:320px;
background:url("../mx39-hero-event-1600.webp") center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
position:relative;
}

.mx-hero::before{
content:"";
position:absolute;
inset:0;
background:rgba(10,15,20,0.75);
}

.mx-hero-inner{
position:relative;
z-index:2;
color:white;
max-width:700px;
}

.mx-series{
letter-spacing:3px;
font-size:12px;
opacity:.6;
margin-bottom:10px;
}

.mx-sub{
opacity:.85;
margin-bottom:30px;
}

/* HERO EYEBROW LABEL */

.hero-eyebrow{
font-size:.75rem;
letter-spacing:3px;
text-transform:uppercase;
opacity:.6;
margin-bottom:12px;
}

/* ============================
SPEC BAR
============================ */

.mx-spec-bar{
background:#0f141a;
padding:25px 20px;
font-weight:600;
}

.mx-spec-container{
max-width:1200px;
margin:auto;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:20px;
}


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

.mx-positioning{
padding:80px 20px;
background:#11161c;
}

.mx-positioning p{
max-width:750px;
margin-top:20px;
color:#aab2bd;
line-height:1.7;
}


/* ============================
DEPLOYMENT DIAGRAM
============================ */

.mx-diagram{
padding:90px 20px;
background:#0f141a;
}

.mx-diagram img{
max-width:1100px;
width:100%;
margin-top:40px;
border-radius:16px;
box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.mx-diagram-sub{
color:#9aa6b2;
margin-top:10px;
}


/* ============================
BUILD ADVANTAGE
============================ */

.mx-build-advantage{
padding:90px 20px;
background:#11161c;
}

.mx-build-advantage img{
max-width:1100px;
width:100%;
margin-top:40px;
border-radius:16px;
box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.build-sub{
color:#9aa6b2;
margin-top:10px;
}


/* ============================
WHY SECTION
============================ */

.mx-why{
padding:90px 20px;
background:#0f141a;
}

.mx-why-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
margin-top:40px;
}

.mx-why-grid h3{
margin-bottom:8px;
}

.mx-why-grid p{
color:#aab2bd;
line-height:1.6;
}


/* ============================
LIFESTYLE
============================ */

.mx-lifestyle{
padding:90px 20px;
background:#11161c;
}

.lifestyle-flex{
display:flex;
gap:60px;
align-items:center;
flex-wrap:wrap;
}

.lifestyle-image{
flex:1;
}

.lifestyle-image img{
width:100%;
border-radius:16px;
box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.lifestyle-content{
flex:1;
}

.lifestyle-content p{
margin-top:15px;
color:#aab2bd;
line-height:1.6;
}


/* ============================
SPEC GRID
============================ */

.mx-specs{
padding:90px 20px;
background:#0f141a;
}

.mx-spec-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:20px;
margin-top:40px;
}

.spec-item{
background:#161e27;
padding:18px;
border-radius:6px;
display:flex;
justify-content:space-between;
align-items:flex-start;
flex-direction:column;
}

.spec-item strong{
font-size:14px;
opacity:.7;
}

.spec-item span{
margin-top:4px;
font-size:15px;
}


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

.mx-cta{
padding:100px 20px;
background:#111827;
text-align:center;
}

.mx-cta p{
margin-top:10px;
color:#9aa6b2;
}

.mx-faq{
padding:90px 20px;
background:#11161c;
}

.faq-item{
margin-bottom:30px;
max-width:800px;
}

.faq-item h3{
margin-bottom:10px;
}