/* =========================
MOBILE FIX — FINAL
========================= */

@media(max-width:768px){

/* tighten ALL sections */
section{
padding:30px 0;
}

/* HERO FIX */
.hero{
padding-top:90px;
padding-bottom:20px;
}

.hero h1{
font-size:26px;
line-height:1.2;
}

.hero-sub{
font-size:14px;
margin-top:10px;
}

.hero-core{
max-width:200px;
margin:20px auto;
}

/* SYSTEM MAP FIX */
.system-map img{
max-width:300px;
margin:20px auto;
}

/* ARCHITECTURE FIX */
.arch-grid{
gap:12px;
}

.arch-card{
padding:16px;
}

/* STORY FIX */
.story-grid{
gap:20px;
}

.story-block p{
font-size:14px;
}

/* BUILD SECTION FIX */
.build-grid{
gap:12px;
}

.build-card{
padding:16px;
}

/* CTA FIX */
.cta{
padding:10px 20px;
font-size:14px;
}

}
/* SYSTEM MAP */

.system-map{
padding:60px 20px 40px;
text-align:center;
}

.map-wrap{
max-width:900px;
margin:0 auto;
border-radius:12px;
overflow:hidden;
border:1px solid rgba(212,175,55,0.2);
background:#0a0a0a;
}

.map-wrap img{
width:100%;
height:auto;
display:block;
opacity:0.95;
}

/* caption */
.map-caption{
font-size:13px;
color:#aaa;
max-width:500px;
margin:20px auto 0;
line-height:1.5;
}


/* MOBILE CONTROL */
@media(max-width:600px){

.system-map{
padding:40px 15px;
}

.map-wrap{
max-width:100%;
}

.map-caption{
font-size:12px;
padding:0 10px;
}

}


/* DESKTOP */
@media(min-width:768px){

.map-wrap{
max-width:1000px;
}

.map-caption{
font-size:14px;
}

}